0

I have a web page with a right floated navigation panel and content that wraps it. Content is displayed as multiple divs of same size. The problem is that the right panel is dynamic with variable height, and in most cases when a div is placed under the panel, then it doesn't stay in the same line with its preceding divs but becomes shifted down. This in turn increases space between the lines. I want to make so that a div would be placed under the right panel only if it would stay in the same line with the preceding divs and not break the page layout. How can I achieve this? Thanks!

My HTML/CSS:

<div id="content">
<div id="navrgt">this is rigth navigation panel</div>

<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
  <div class="clear"></div>
      </div>

CSS:

#content
{
position:relative;
border:1px solid yellow;
}

.prodthumb 
{
float:left;
margin:10px;
width:200px;
height:200px;
background-color:grey;
}

#navrgt
{
position:relative;
float:right;
right:0px;
top:0px;
width:200px;
height:50px; /*height is variable. 50px is for this example only */
border:1px solid red;
}

div .clear 
{
clear:both;
}
2

2 Answers 2

3

I suppose this is your problem:

enter image description here

In this case, I would suggest wrapping the prodthumb divs with an additional div.

This will make the boxes align like this: enter image description here

Here is the code:

HTML:

<div id="content">
<div id="navrgt">this is rigth navigation panel</div>

<div class="prods">
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="clear"></div>
</div>

CSS:

#content {
position:relative;
    border:1px solid yellow;
    }
    .prods {
        float:left;
    }

.prodthumb {
    float:left;
    margin:10px;
    width:200px;
    height:200px;
    background-color:grey;
}

#navrgt {
    position:relative;
    float:right;
    right:0px;
    top:0px;
    width:200px;
    height:50px; /*height is variable. 50px is for this example only */
    border:1px solid red;
}

div .clear {
    clear:both;
}
4
  • Nice solution. You could also suggest using an unordered list rather then a whole bunch of DIVs. And applying overflow:hidden; to the parent DIV to clear the floats opposed to using the clearfix hack.
    – Dan
    Jul 25, 2011 at 0:59
  • Well, actually the clear-div is not needed at all. I just forgot to delete it. You could replace the divs with an unordered list - but sticking to the original solution with a bunch of divs and fixing that was the most obvious to me. :)
    – pegel
    Jul 25, 2011 at 1:28
  • 1
    Hi, the problem identified correctly, but putting the divs in a wrap div is not what I really wanted. Ideally there shouldn't be a column on the right, in my case it'll only consume too much space. I want the content divs to wrap the panel in the top right corner, but stay in the same line with other content divs as if they were aligned to grid.
    – lekso
    Jul 25, 2011 at 1:29
  • regarding clear divs. my example is a part of a more complex design, therefore there was this clear div. I'll test the overflow property, thanks.
    – lekso
    Jul 25, 2011 at 1:32
2

So heres an example that works like you want, i believe http://jsfiddle.net/RshTE/

Only thing is that i believe that IE6 wont like this.. I dont like to support ie6 anyways.

http://jsfiddle.net/RshTE/ there are couple other downsides to this code that are shown in the example.

But, uh... Enjoy? :D

I've never really had to do something like this so there might be a better way and i just dont know that.

CSS:

#wrap {
    width: 600px;
    margin: 0px auto;
    border: 1px solid #e1e1e1;
}

#sidebar {
    float: right;
    width: 150px;
    border: 1px solid #e1e1e1;

    height: 220px;
}

.content-box {
    overflow: auto; /* Important part */
    border: 1px solid #e1e1e1;
}

HTML:

<div id="wrap">
    <div id="content">
        <div id="sidebar">Sidebar</div>
        <div class="content-box">Content box 1</div>
        <div class="content-box">Content box 2</div>
        <div class="content-box">Content box 3</div>
    </div>
</div>

Edit: http://jsfiddle.net/RshTE/8/ & http://jsfiddle.net/RshTE/9/

( Information about the display: inline; hack http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ )

10
  • looks approximately as I want it but you have only one DIV per line. If you reduce the width of "content-boxes" then problem repeats and the DIV under the right bar pushes all the below DIVs down
    – lekso
    Jul 25, 2011 at 13:01
  • Could you elaborate a little more? Im kinda lost in what you say. If you want to change the width of the content boxes isnt what pegel said just the way to go? And i just dont understand "you have only one div per line" i mean.. no one will be able to see the content if you fit dozen content boxes to a height of one line.. so isnt one enough? i started thinking about what you said about the width.. and i have no idea .. but i made this jsfiddle.net/RshTE/3
    – Joonas
    Jul 25, 2011 at 14:42
  • it is about "content-box" class in your example, make its width 100px and you'll see what I mean. Also, there is a proposal from user pegel above. He added an image which approximately shows how the divs should be placed next to each other. Though in his example if he would add one more content div then it would go to third line and I want to put it on the right in the second line.
    – lekso
    Jul 25, 2011 at 14:48
  • 2
    jsfiddle.net/RshTE/4 This seems to have poor support on IE browsers.. im not super familiar with using display: inline-block; Then theres also this jsfiddle.net/RshTE/5
    – Joonas
    Jul 25, 2011 at 17:52
  • 1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.