?
Solved

CSS Block Layout Frustration

Posted on 2008-11-08
3
Medium Priority
?
267 Views
Last Modified: 2012-05-05
I am currently going nuts over a CSS layout problem.  Best way is to explain with an example below.

To simplify what i am trying to do, I have 3 main blocks, top, middle and bottom.  Each needs to sit under the next.  In the middle block, there are two blocks, left and right.  I want the middle block to wrap around the outer of the its contained left & right blocks, and ensuring that the bottom block sits below these.  I am setting all blocks to position:relative.

If I don't set the middle-left&right to float:left, the middle block wraps around fine, and the bottom block sits below the middle block fine, BUT, my right block is below my left block.

IF I set left and right block to float:left, my inner (left and right) blocks are now sitting side by side (left on left side, right on right side) as they should, but the middle block (which my left and right blocks are INSDE of) now contracts up.. its bottom border does not sit below the bottom of the left and right block.  And the bottom block moves up and displays on top of the middle block.  This only happens in Firefox.. IE seems to be fine.

I have been pulling my hair out with this for hours and will fall passionately in love with whoever can understand my convoluted description above and save my sanity.

Thanks in advance
<div id="topBlock">
..
</div>
 
<div id-="middleBlock">
   <div id="LEFTBlock">
   ..
   </div>
   <div id="RIGHTBlock">
   ..
   </div>
</div>
 
<div id="bottomBlock">
..
</div>

Open in new window

0
Comment
Question by:Jay1607
  • 2
3 Comments
 
LVL 39

Accepted Solution

by:
Roger Baklund earned 2000 total points
ID: 22912154
Have you tried clearing the bottom block? Like this:

#bottomBlock { clear: both }

If you need to have a visible middleBlock, insert a dummy clearing block within it:

<div id="middleBlock">
   <div id="LEFTBlock">
   ..
   </div>
   <div id="RIGHTBlock">
   ..
   </div>
   <div style="clear:both"></div>
</div>
0
 

Author Comment

by:Jay1607
ID: 22912223
cxr.. Thank You!!!  exactly what I needed.  Worked beautifully.  THANK YOU!
0
 

Author Closing Comment

by:Jay1607
ID: 31514652
Thank you!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month13 days, 14 hours left to enroll

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question