CODEWITHSUNDEEP
css
jokul
jokul

Reputation: 1339

li elements are getting double margin, ul element cant be properly sized

This problem is a double whammy, essentially, I have this setup:

<section>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div></div>
    <div></div>
</section>

Here is the stylesheet:

ul{
    width: 100%;
    margin: -5px 0;
    padding: 0;
    background-color: tomato;
}

li{
    width: 200px;
    height: 100px;
    margin: 5px;
    background-color: yellowgreen;
    float: left;
    list-style: none;
}

ul:after{
    content: " ";
    height: 0;
    display: block;
    clear: both;
}

div{
    width: 100%;
    height: 100px;
    margin: 5px;
    background-color: cornflowerblue;
}

Fiddle: http://jsfiddle.net/p299jd55/2/

The problem is that I want the list items to pretend as though the <ul> isn't there. The version I have currently works on the vertical, but not on the horizontal. Additionally, the <ul> is a bit smaller than the divs so the list elements will not line up correctly with the divs even if they would normally. I want the list elements to appear as the other divs do (except smaller). The problem is that I need to keep them in the <ul> element in order for my VM binding library (KnockoutJS) to work correctly.

Is there any way to get around this without introducing a wrapper for the divs as well? I'd like to keep down the number of elements that exist solely to hack CSS to a minimum. If there is no way to do this without wrapping the divs, I am okay with that but I would prefer it be the last resort option.

Upvotes: 0

Views: 76

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9577

Pretty straightforward:

CSS Changes

ul{
    width: 100%;
    margin: 0 0; /* Changed */
    padding: 0;
    background-color: tomato;
}

 

div{
    width: 100%;
    height: 100px;
    margin: 5px 0; /* Changed */
    background-color: cornflowerblue;
}

Fiddle illustrating the change

 

What's going on here is that your margins were all over the place. No need to set negative margins on the ul when you're going to be simply overriding them in the li. That's what was causing your layout to be wonky.

Update

Based on your feedback in the comments, here's how you can flush the div section to your ul

Fiddle with flush div section

Basically, we're using your clearfix solution to pull the following elements upward by adding this line to ul:after:

margin-bottom: -10px;

and then adding this rule:

li:first-child {
    margin-left: 0;
}

Hope that helps.

Update part deux

Based on your comments

That's incredibly simple.

Just add float to both your li elements and your div elements. Remove the clearfix section.

Example fiddle

Upvotes: 1

Related Questions