Menu
I have a .HTML file in which I cannot change, under no circumstances.
I have to style the webpage which makes the Header DIV at the top of the page (100% width), Navigation DIV (25% width) appear down the left hand side BELOW the Header DIV, with the Sales DIV (75% width), appear to the right-hand side of the Navigation DIV, with the Products DIV (100% width) below the Sales DIV.
With the footer DIV at the very bottom below all of the other DIV's on the page, 100% width.
<body>
<div id="wrapper">
<div id="nav"></div>
<div id="header"></div>
<div id="sales"></div>
<div id="products"></div>
<div id="footer"></div>
</div>
</body>
Is it possible to do this without changing the logical order of the HTML DIV's and only using CSS positioning, floats, etc?
806
CSS Flexbox allows you to change the order of elements without changing the HTML markup. So: Order the elements for desktop. Then use media queries and flex display to change the order.
You can do it using flexbox. According to csstricks: The order property is a sub-property of the Flexible Box Layout module. Flex items are displayed in the same order as they appear in the source document by default.
We can reorder HTML elements by using many methods in CSS. We use flexbox's order property. Order property is used to change the visual order and not their logical order. Items in a container are sorted in ascending order value and then by their source code order.
If you can fix the header height, then it's pretty trivial, just use position:absolute or negative margins for #header:
#wrapper {positioN:relative;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;}
#nav {display:inline-block;width:25%;}
#sales {display:inline-block;width:75%;}
#products {margin-left:25%;}
#footer {}
http://jsfiddle.net/FZTj7/1/
And those inline-blocks can be switched to floats to get #nav to go below the top side of products block:
#wrapper {positioN:relative;margin:20px;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;}
#nav {float:left;width:25%;}
#sales {float:left;width:75%;}
#products {margin-left:25%;}
#footer {clear:left;}
http://jsfiddle.net/FZTj7/2/
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
