Two Column Layout And Vertical Menu Tutorial
Position the Left and Right Column Sections
Lesson 5
Two Column Layout And Vertical Menu Tutorial
Position the Left and Right Column Sections
Lesson 5
This lesson aligns the #left-column and #right-column div elements into a row.
To do that we use the float CSS property. The div element is a block element. The normal flow for block elements is to stack from the top down. This exactly how blocks in the physical world stack only from the bottom up.
The float property removes a block element from its normal position. The float property values include left and right. All the blocks below float up and align either to its left or right depending on the value you apply. This also depends on available space to fit if the parent container element has a fixed width. If not enough space, then the elements will not float up. This is less of an issue when the widths are not fixed.
Completed Lesson In Web Browser
Exercise Steps
HTML Source Code
This is the index.html file. There are no changes from the previous lesson.
In the site.css file in your practice folder add lines 10, 11, 14 and 15, then save.
CSS Source Code
This is the site.css file.
The #left-column selector has its float property set to left. Any block elements that use this selector will allow later block elements to appear to its left. The width was also set to a fixed value for a uniform look regardless of content.
The #right-column selector, the content, is applied to the element that follows the element with the #left-column selector, the menu. It will then float up to the left of the #left-column element.
But you will find it over laying the code>#left-column element. This is normal when you use the float property. To overcome this effect the #right-column selector’s margin-left property is set to the width of the the code>#left-column selector plus a bit more for spacing.
Property References: