Jump to content


Photo

Wrapper Divs

wrapper divs

Best Answer Andy325i, 24 April 2017 - 09:32 PM

Thank you Tim, tested on the PC and works perfectly. Much appreciated!

Go to the full post


  • Please log in to reply
14 replies to this topic

#1 Andy325i

Andy325i

    Forum Newcomer

  • Members
  • Pip
  • 17 posts
  • Gender:Male
  • Location:Gloucester UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 19 April 2017 - 06:47 PM

Here is my web page I am playing with:

 

http://www.worldclas...vs/template.php

 

And here is the source code:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title><?php echo $title ?></title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>

<body>
<p>This is the background</p>

<div id="wrapper">
<p>This is the wrapper</p>

<div class="gendiv">
<p>E30</p>
</div>

<div class="gendiv">
<p>E36</p>
</div>

<div class="gendiv">
<p>E46</p>
</div>

<div class="gendiv">
<p>E92</p>
</div>

<div class="gendiv">
<p>F30</p>
</div>

</div>



</body>
</html>


And here is the CSS:

body
{
    font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
    background-color: #11ff11;

}

body p
{
    font-size: 0.8em;
    line-height: 1.28;
}

#wrapper
{
    
    max-width: 70%;
    background-color:#ffffff;
    margin: 0 auto;
    text-align:center;
    border: 5px solid #4444ff;
}

div.gendiv
{
    float:left;
    background-color: black;
    border:#EF0A0E 5px solid;
    color: white;
    text-align:center;
    font-size:30px;
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    margin: 10px;
    padding: 10%;
    max-width:50%;

}

Why do the black boxes not appear in the Wrapper Div (the white area)?

 

 

Many thanks

 

Andy


Edited by webdesigner93, 20 April 2017 - 02:16 PM.


#2 TimW

TimW

    Dedicated Member

  • Members
  • PipPip
  • 211 posts
  • Gender:Male
  • Location:West Country
  • Experience:Intermediate
  • Area of Expertise:Nothing

Posted 19 April 2017 - 09:17 PM

It's a thing with floats. When you float the black boxes it takes them out of the 'flow' of the html and the parent wrapper is no longer effected by them. Float the parent wrapper as well and it will contain the black box children, or add an empty, not floated, clearing div at the end of your black boxes 

 <div style="clear: both;"></div>

or there are other clever ways with clearfix classes. 

 

Although all that is going to become redundant with flexbox soon


Edited by TimW, 19 April 2017 - 09:20 PM.


#3 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,938 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 19 April 2017 - 09:23 PM

It's a thing with floats. When you float the black boxes it takes them out of the 'flow' of the html and the parent wrapper is no longer effected by them. Float the parent wrapper as well and it will contain the black box children, or add an empty clearing div at the end of your black boxes 

 <div style="clear: both;"></div>

or there are other clever ways with clearfix classes. 

 

Although all that is going to become redundant with flexbox soon

 

 

Flexbox doesn't make floats or other layout options redundant, far from it.  Flexbox shouldn't really be used for full page layout, it can be slow to render due to it typically being content dependant.

 

CSS Grids will be the next thing that looks likely to replace what we've been using for grid layouts, in the meantime I recommend using inline-block for grids as it yields more control around alignment and is less brittle than using floats.

 

The thing to bear in mind with all of these tools is that they don't replace what we already have in the vast majority of circumstances, they merely add to the arsenal that we currently have at our disposal.  Best tool for the job rings true all so often.

 

 

OP: It would be much more useful to us if you could deploy your code somewhere for us to see like Codepen for example.


Edited by rbrtsmith, 19 April 2017 - 09:25 PM.


#4 Andy325i

Andy325i

    Forum Newcomer

  • Members
  • Pip
  • 17 posts
  • Gender:Male
  • Location:Gloucester UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 20 April 2017 - 08:06 PM

Thank you guys, as Tim suggested works perfectly, but for the life of me I can't get the black boxes to center themselves within the white box.

 

I've tried:

align-self:center;
text-align:center;
align-content:center;
align-items:center;

 

but to no avail

 

Any ideas would be much appreciated

 

I will certainly look into Codepen, :)

 

Andy



#5 Fuzzy Logic

Fuzzy Logic

    Web Guru

  • Gold Membership
  • 1,350 posts
  • Gender:Male
  • Location:Kent uk
  • Experience:Advanced
  • Area of Expertise:Designer

Posted 20 April 2017 - 08:10 PM

To use those, whatever you are centering must have a width defined otherwise it will always assume 100% width, of which cannot be centered (I could be wrong with that being your issue though, I have not got time to check your code)


#6 NOCK

NOCK

    Chief Troll Hunter

  • Privileged
  • PipPipPipPipPip
  • 1,577 posts
  • Gender:Male
  • Location:Eastbourne, East Sussex
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 20 April 2017 - 08:21 PM

As Robert suggested, please make a codepen so that we can help more easily.

 

Also, indent your code if you want an easier life... your editor might even be able to do this for you if you're unsure as to how it should be indented at first.



#7 TimW

TimW

    Dedicated Member

  • Members
  • PipPip
  • 211 posts
  • Gender:Male
  • Location:West Country
  • Experience:Intermediate
  • Area of Expertise:Nothing

Posted 20 April 2017 - 09:51 PM

To center align the black boxes as a group either the old way:

 

Put the boxes in an inner div and align that div in your wrapper by setting the margins L&R to auto

 

Or the new flexbox way, give your #wrapper the styles 

display: flex;
flex-wrap: wrap;
justify-content: center;

Having that text (This is the wrapper) in with the boxes messes it up though.


Edited by TimW, 20 April 2017 - 09:52 PM.


#8 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,938 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 21 April 2017 - 07:43 AM

To use those, whatever you are centering must have a width defined otherwise it will always assume 100% width, of which cannot be centered (I could be wrong with that being your issue though, I have not got time to check your code)

 

This only applies to block level elements.  table, inline-block and inline have a default width determined by their descendants.

 

Any Flexbox suggestions should mention that it not supported on IE <10 and only has partial support on IE 10 & 11.  http://caniuse.com/#search=flexbox - worth noting the number of issues on the "issues" tab...
There are also the problems described above in my earlier post so there's no good reason to use it here for centering, it can all be done with better supported features.

 

The grid system in my framework is capable of centering grid items, simply because it uses inline-block so items can be aligned on both the X and Y axis. see the demo http://rbrtsmith.com/nebula-css/#grid and scroll through the examples.


Edited by rbrtsmith, 21 April 2017 - 07:51 AM.


#9 Fuzzy Logic

Fuzzy Logic

    Web Guru

  • Gold Membership
  • 1,350 posts
  • Gender:Male
  • Location:Kent uk
  • Experience:Advanced
  • Area of Expertise:Designer

Posted 21 April 2017 - 09:05 AM

 

This only applies to block level elements.  table, inline-block and inline have a default width determined by their descendants.

 

Any Flexbox suggestions should mention that it not supported on IE <10 and only has partial support on IE 10 & 11.  http://caniuse.com/#search=flexbox - worth noting the number of issues on the "issues" tab...
There are also the problems described above in my earlier post so there's no good reason to use it here for centering, it can all be done with better supported features.

 

The grid system in my framework is capable of centering grid items, simply because it uses inline-block so items can be aligned on both the X and Y axis. see the demo http://rbrtsmith.com/nebula-css/#grid and scroll through the examples.

 

I know it does not work on flexbox, but I was unaware that the op was using flexbox.



#10 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,938 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 21 April 2017 - 09:23 AM

 

I know it does not work on flexbox, but I was unaware that the op was using flexbox.

 

Sorry, only the initial part of my comment was referring to your post, the remainder was aimed at the OP and those suggesting Flexbox for overall page layout to point out the caveats that come with it.



#11 Fuzzy Logic

Fuzzy Logic

    Web Guru

  • Gold Membership
  • 1,350 posts
  • Gender:Male
  • Location:Kent uk
  • Experience:Advanced
  • Area of Expertise:Designer

Posted 21 April 2017 - 01:45 PM

 

Sorry, only the initial part of my comment was referring to your post, the remainder was aimed at the OP and those suggesting Flexbox for overall page layout to point out the caveats that come with it.

 

It's cool, thanks



#12 Andy325i

Andy325i

    Forum Newcomer

  • Members
  • Pip
  • 17 posts
  • Gender:Male
  • Location:Gloucester UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 April 2017 - 07:49 PM

Added to Codepen here:

 

https://codepen.io/Andy325i/pen/YVWXdV

 

I have given the divs (black boxes) a width now as Fuzzy suggested but to no avail

 

I've looked at your demo page Robert, but unsure how to apply it to this code

 

Andy



#13 TimW

TimW

    Dedicated Member

  • Members
  • PipPip
  • 211 posts
  • Gender:Male
  • Location:West Country
  • Experience:Intermediate
  • Area of Expertise:Nothing

Posted 22 April 2017 - 11:11 AM

Thank you guys, as Tim suggested works perfectly, but for the life of me I can't get the black boxes to center themselves within the white box.

 

[...]

 

If you want them centred maybe you don't want to float them left at all. Might it be easily done just by making them inline-blocks?

 

[edit] Like this:

https://codepen.io/pripin/pen/GmqEvB

 

Hope that works, I don't use codepen. forked and saved.


Edited by TimW, 22 April 2017 - 12:17 PM.


#14 Andy325i

Andy325i

    Forum Newcomer

  • Members
  • Pip
  • 17 posts
  • Gender:Male
  • Location:Gloucester UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 23 April 2017 - 09:53 PM

Thank you so much Tim, only on my tablet ATM, so will check on the pc later, but appears to work perfectly from here.

Your a gent

Andy


#15 Andy325i

Andy325i

    Forum Newcomer

  • Members
  • Pip
  • 17 posts
  • Gender:Male
  • Location:Gloucester UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 24 April 2017 - 09:32 PM   Best Answer

Thank you Tim, tested on the PC and works perfectly. Much appreciated!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users