Can anyone please kindly take a quick look at my short source code. I am trying to use the container div to fix the page width at 934px, which on my 1280 px laptop should leave margins of 173 px on either side. The first / left margin behaves correctly ie no content in the first 173 px of the page, but there seems to be no boundary on the right hand side of the page.
Unless you really want to use words a thousand characters long, normal text will flow within the container. Because there are no breaks between those Qs, you’ve got one long word. How is the browser supposed to know where to break it?
You have two issues here to do with “clearing floats”. A container does not wrap around floated contents by default (except in IE, which gets it wrong). You have to tell it to do so, and there are various ways to do it. If you didn’t have a non-floated footer following your floats, you could apply overflow: hidden to the #container div. However, all you need to do here is apply clear: both to the footer to pull it down below the floated columns.
OK thanks, that is a bit strange. I just read something about the overuse of floats and am now wondering whether I need to use floats at all to create two columns. Maybe I could just have two divs with the left hand column positioned next to the left side of the page but the right hand div positioned 300px from the left. So I tried this but while the right hand column is behaving correctly, the left hand column will only start at the end of the right hand column, leaving the space above, where I want it to go, as blank.
This is a perfect situation for using floats, so stick with them. Using position for placing columns is a bad idea, as they are harder to control. Those columns are behaving just as they should the way you have them now. They naturally sit one atop another. The “right” div has its natural place above the “left” column, and position:relative just moves it 300px to the right while preserving its rightful space.
Trust me: use floats here. The only other real option is position:absolute, but then other page items won’t flow nicely when the columns expand and contract.
OK thank you, can I say that an element considers itself to own all the horizontal place on its level except when something is floated from the other side, so having different elements on the same horizontal level is generally going to involve ‘float’?
Elements are normally classed as “block” or “inline” element. Block level elements (like divs, p, h1 etc) own their own space (horizontal and vertical) unless CSS steps in to visually move them about. There are other ways to sit elements side by side, such as position, css tables, HTML tables etc, but generally floats are the way to go at the moment (until something better comes along).
Inline elements (like images, anchors, spans etc) by default sit side by side.
Whether an image is block or inline by nature, you can change that via CSS. You can dictate that a div is “inline”, or even “inline-block” and a few others as well.