• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Div Positioning Problems (again)

Hi all,

Well I finally got somewhere with my site design last week and thought I was getting to grips with the whole div positioning thing... but no :-(

I managed to layout my home page with some success (not sure what you guys will think of my coding skills on it though!) its just the about page that I'm struggling with.

I want to have 3 columns of body copy which span across the page horizontally (right -hand column would be higher than other two to fill white space next to intro text), but I just can't work out how to get the divs to sit next to each other!

I've tried floating the left-hand column to the left but as soon as I do this the containing 'content' div dissapears from behind it showing the background texture??

Can you guys have a look through my code and point out what I'm doing wrong with the whole positioning thing because I think I'm missing something quite fundamental in my coding! I don't mind if you come back with other suggestions as well, I'm still very much a novice so any advice would be EXTREMELY valuable!

By the way... the javascript on my home page will be externalised one the site is complete!

Here's the link to my site: Design Routes - Home



Active Member
Your page only shows one column at present so it's hard to check exactly what you mean... BUT it sounds like: when you float 2 or more elements within a parent element - the parent element will lose its dimensions (or at least visibility).

To fix this either give your parent element overflow hidden in the css > #content {overflow:hidden} or insert a break to clear <br style="clear:both" /> (<br class="clear" /> then .clear {clear:both} in your css)
Yeah, my home page only has one column at the moment... I'm going to put a news section to the right of that column eventually though. The problem I'm having is on the 'about' page... I have tried putting a second column on the page but as you can see it appears to the right of the first column but at the bottom. I will try the overflow hidden option on my containing 'content' div and see if that works though.



Active Member
Hi Rosedani,

The problem you having is your getting confused with positioning, containers and adding in additional markup where it isnt needed

This link is super old, but will explain what your trying to do far easier than I can type up.
Little Boxes

choose the solution that's closest to your requirements.

you can then compare your code against the demo and you'll see how your complictaing things!
Hope it helps.

Sorry Geoff, looking at the examples on that page, I can't find any that are close to my requirements. None of the examples use nested divs which I need on my layout. I think what I need is a "laymans" terms tutorial on how to position divs on a page which includes layouts that use nested divs.

The search continues!
OK I've managed to get three columns to appear horizontally on my 'about' page using the 'overflow:hidden' code on my 'content' div.

Now I can't get the right hand column to move up... I want it to appear to the right of the intro text and the text inside to flow down the page to the bottom. (I have duplicated the text from the first column for now so all the columns are visible.

Here's the link to the page: Design Routes - About



Active Member
Hey Rosedani,

You could always pay for some one to take a look for you? Plenty of members on the forums who are more than capable in helping you, that being said i have 5 mins free...

Your structure and css is making the physical layout more difficult then it needs to be.
However, if you wanting to have that right hand column move up, you could just simply specify the top position.

ala line no 274 sitecss.css --> #righttextcolumn {top:-200px;}