CODEWITHSUNDEEP
htmlcss
Tim
Tim

Reputation: 2649

DIV falling below other DIV in CSS layout

I'm trying to achieve this layout on my page amongst the #about1, #about2 #about3, #about4 and #twitter divs on the lower part of my web page.

enter image description here

The #twitter div (the large one on the right) is falling below the other 4 divs (#about1, etc) on the left.

Here is my web page here online where you can see the #twitter div dropping below: http://www.replyonline.co.uk/test/index.html

Any ideas what I can do to the markup or CSS to make this position correctly as per the visual above?

#twitter{
width: 260px;
margin-bottom: 20px;
height: 290px;
overflow: auto;
font-size: 11px;
background: #ececec;
}

Do I need to add anything to the CSS or markup?

Many Thanks

Upvotes: 1

Views: 1087

Answers (2)

Nico
Nico

Reputation: 2663

Looks to me like it's happening because the "wrapper" div on your site isn't wide enough to fit all the boxes below. So you can probably fix it by either resizing that div, or putting the boxes below in a separate div that's not contained by "wrapper".

However, that introduces a new problem because the flow layout of those 4+1 boxes is incorrect. One way you could fix that would be to add "float:right;" to #twitter, and put it before the 4 boxes in the HTML.

So the complete structure would be:

<div wrapper></div>
<div wrapper2>
   <div twitter style="float:right"></div>
   <div box1></div>
   <div box2></div>
   ...
</div>

Upvotes: 1

Hikaru-Shindo
Hikaru-Shindo

Reputation: 1901

The width of your twitter div seems to be a little too much wich lets it drop below. Reduce it by a few pixel this should fix the issue.

I tried it out using FireBug in Firefox and pinned down the correct width to 240px.

Upvotes: 1

Related Questions