Menu
I'm developing a 3-column website using a layout like this:
<div id='left' style='left: 0; width: 150px; '> ... </div>
<div id='middle' style='left: 150px; right: 200px' > ... </div>
<div id='right' style='right: 0; width: 200px; '> ... </div>
But, considering the default CSS 'position' property of <DIV>'s is 'static', my <DIV>'s were shown one below the other, as expected.
So I set the CSS property 'position' to 'relative', and changed the 'top' property of the 'middle' and 'right' <DIV>'s to -(minus) the height of the preceding <DIV>. It worked fine, but this approach brought me two problems:
1) Even though Internet Explorer 7 shows three columns properly, it still keeps the vertical scrollbar as if the <DIV>'s were positioned one below the other, and there is a lot of white space after the content is over. I would'n like to have that.
2) The height of these elements is variable, so I don't really know which value to set for each <DIV>'s 'top' property; and I wouldn't like to hardcode it.
So my question is, what would be the best (simple + elegant) way to implement this layout? I would like to avoid absolute positioning , and I also to keep my design tableless.
399
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag.
Defining columns in HTML More columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML. <div class="row"> tag is used to initialize the row where all the columns will be added. <div class="column" > tag is used to add the corresponding number of columns.
Three or more different div can be put side-by-side using CSS in the same div. This can be achieved with flexbox – but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work.
If you haven't already checked out A List Apart you should, as it contains some excellent tutorials and guidelines for website design.
This article in particular should help you out.
57
Give BluePrint CSS a try. It is really simple to get started with, yet powerful enough for most applications.
Easy to understand tutorials and examples. Has a typography library that produces decent results straight out of the box.
23
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
