CODEWITHSUNDEEP
htmlcss
Purify
Purify

Reputation: 589

CSS: Div won't position

Here is an image of my problem:

Screenshot of rendered page http://cl.ly/image/0E2N1W1m420V/Image%202012-07-22%20at%203.25.44%20PM.png

My first error is that there's a ton of empty space between the banner and the "Web Design" div. My second error is that the "Web Development" div should be beside the "Web Design" div. The widths of these divs are both specified as 23% and I've tried using the float property but that didn't work either.

HTML:

<div id="maininfo">
    <div id="eyediv">
        <li><a class="eye"></a></li>
        <h1>Web Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia condimentum dignissim. Suspendisse potenti. Nunc in metus id lorem accumsan vehicula. Proin posuere lacus id odio tincidunt mattis sit amet et sapien. Nulla facilisi. Quisque sodales risus eget mauris adipiscing vitae scelerisque metus mattis. Praesent lectus purus, feugiat eleifend faucibus nec, volutpat sed eros. Praesent quis ante pharetra mauris pretium porttitor.</p>
        <button type="button">SEE MORE</button>
    </div>

    <div id="spannerdiv">
        <li><a class="spanner"></a></li>
        <h1>Web Development</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia condimentum dignissim. Suspendisse potenti. Nunc in metus id lorem accumsan vehicula. Proin posuere lacus id odio tincidunt mattis sit amet et sapien. Nulla facilisi. Quisque sodales risus eget mauris adipiscing vitae scelerisque metus mattis. Praesent lectus purus, feugiat eleifend faucibus nec, volutpat sed eros. Praesent quis ante pharetra mauris pretium porttitor.</p>
        <button type="button">SEE MORE</button>
    </div>

CSS: 

#maininfo {
    clear: both;
}

#maininfo li {
    list-style: none;
}

#eyediv {
    margin-left: 15%;
    width: 23%;
}

#spannerdiv {
    width: 23%;
    padding-left: 3px;
    float: left;
}

Upvotes: 0

Views: 3548

Answers (3)

Scillon
Scillon

Reputation: 320

The clear:both; apply to the parent div maininfo and not to child divs, so that should not be a problem. This should only make the maininfo div have the line to itself.

The float on spannerdiv will make only it to float and won't neccesary be placed next to the eyediv, as it float up to the first parent div which has position: relative.

I'd suggest doing something else in order to line the two divs next to each other. Wrap the divs you want aligned (in this case eyediv and spannerdiv) in a parent div and with CSS give the child divs display:inline-block;. And you'd also want to align them vertically. Something like:

HTML

<div id="wrapperdiv">
    <div id="eyediv">
        <li><a class="eye"></a></li>
        <h1>Web Design</h1>
        <p>Lorem ipsum dolor...</p>
        <button type="button">SEE MORE</button>
    </div>

    <div id="spannerdiv">
        <li><a class="spanner"></a></li>
        <h1>Web Development</h1>
        <p>Lorem ipsum do...</p>
        <button type="button">SEE MORE</button>
    </div>
</div>

CSS

#eyediv {
    margin-left: 15%;
    width: 23%;
}

#spannerdiv {
    width: 23%;
    padding-left: 3px;
    float: left;
}

#eyediv, #spannerdiv {
    display: inline-block;
    vertical-align: top;
}

Now all you need is to position the parent div wherever you need.

Hope it helps

Upvotes: 0

David Thomas
David Thomas

Reputation: 253506

As originally mentioned in my comment, the clear: both forces the element to have that 'line' of the display to itself, preventing other floated elements from aligning with it. Removing that declaration should allow the floating to resume as you wish.

Also you should float the elements in order that they can appear together.

Upvotes: 2

Paul Fleming
Paul Fleming

Reputation: 24526

Remove clear: both; and apply float: left;

Upvotes: 1

Related Questions