April 19, 20179 yr Here is my web page I am playing with: http://www.worldclassphotographic.co.uk/divs/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 April 20, 20179 yr by webdesigner93
April 19, 20179 yr 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 April 19, 20179 yr by TimW
April 19, 20179 yr 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 April 19, 20179 yr by rbrtsmith
April 20, 20179 yr Author 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
April 20, 20179 yr 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)
April 20, 20179 yr 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 April 20, 20179 yr by TimW
April 21, 20179 yr 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 April 21, 20179 yr by rbrtsmith
April 21, 20179 yr 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.
April 21, 20179 yr 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.
April 21, 20179 yr 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
April 21, 20179 yr Author 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
April 22, 20179 yr 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 April 22, 20179 yr by TimW
April 23, 20179 yr Author 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
Create an account or sign in to comment