Here is an example of the problem I am having: http://www.scoobasteve.org/widthProblem In that example the green objects are li (there are 4 of them) and they each float:left. What I want to happen is the blue object (which is the ul) to not make the green li drop down a line and also have the red one do the same. I've tried making the widths:100%, auto, and a mixture of the two, but i cannot get it to work.

Here is my HTML:

<body>
<div id="holder1">
    <ul id="holder2">
        <li>
        </li>
        <li>
        </li>
        <li>
        </li>
        <li>
        </li>
    </ul>
</div>
</body>

And my CSS:

html, body {
    width:100%;
    height:100%;
}

#holder1 {
    width:100%;
    height:100%;
    background-color:#F00;
}

#holder2 {
    position:absolute;
    width:100%;
    height:600px;
    background-color:#00C;
    top:50%;
    margin-top:-300px;
}

#holder2 li {
    position:relative;
    height:200px;
    width:500px;
    top:50%;
    margin-top:-100px;
    background-color:#0C0;
    float:left;
}
  • I cant understand what you want to occur. Can you show a screenshot of what is required? Divya Manian almost 8 years ago
  • What is happening right now is the green li are wrapping based on the size of the blue/red div/ul. I do not want this to happen. I want to green li's not to wrap and the red and blue div/ul to adjust their width to the width of the green li's. Stephen Cronin almost 8 years ago

1 answer

0
points

This won't be a cross browser solution (but then the negative margins won't be liked by some browser either) but you could try white-space:nowrap on the ul (and set its width to auto) and set the li's to display:inline-block

absolutely positioning the ul means it can't influence the width of the holder1 div, so you'll need to have a think about that.

what's the real problem you're trying to solve? maybe we could suggest a better way to do it?

my tweaks to your code:

html, body {
    width:100%;
    height:100%;
}

#holder1 {
    width:100%;
    height:100%;
    background-color:#F00;
}

#holder2 {
    position:absolute;
width:auto;
    height:600px;
    background-color:#00C;
    top:50%;
    margin-top:-300px;
white-space: nowrap;
}

#holder2 li {
    position:relative;
    height:200px;
    width:500px;
    top:50%;
    margin-top:-100px;
    background-color:#0C0;
display: inline-block;

}
Answered almost 8 years ago by Tony Crockford
  • Yeah that kind of helped, but holder 1 does not change its size. Can you think of a way to make holder2 relative (or not absolute)? Im gonna go try a few things out with that. Stephen Cronin almost 8 years ago
  • Why do you need it absolute in the first place? The answer to "what problem are you trying to solve?" would be helpful. Tony Crockford almost 8 years ago
  • Yeah sorry, im trying to describe it as best as I can. What I want to happen is the green li not to drop down to another row. In my example holder1 doesn't necessarily need to be there so you can just take it out of the HTML. Stephen Cronin almost 8 years ago