CODEWITHSUNDEEP
css
user1907323
user1907323

Reputation: 23

CSS Issue with float:left; and main container

I've come across a bit of an issue and was hoping for some advice.

I've always been a bit on-off with laying out websites like this but it's come to the day where I've had enough of fending it off.

So I have two divs, left and center, both are set to float:left; These are both in a "main" section but because the two are floating, the "main" section is smaller in height than these two which overlap due to the floating quality.

I've tried display:inline & display:inline-block but the first stacks them one on top of the other whilst the latter completely loses me my CSS for the corresponding div.

Was hoping someone could help me, if so, it'd be greatly appreciated! Here's the code:

HTML:

<div id="main_container">
        <aside id="left">
            <p id="settings_header">
                Account Settings
            </p>
        <hr>
            <img id="profile_picture" src="#" />
            <div id="settings_option">
                <a href="#">
                    Settings
                </a>
            </div>
            <div id="settings_option">
                <a href="#">
                    Sign Out
                </a>
            </div>
        </aside>

        <div id="center">
            <h2>    
                Latest & Greatest Topics
            </h2>   
        </div>
    </div>

CSS:

#main_container {
    width:82%;
    min-width:932px;
    margin-left:auto;
    margin-right:auto;
    padding:10px 10px;
    box-shadow:inset 0 0 10px #000;
    background-color:#ccc;
}

#left {
    width:26%;
    min-width:176.4px;
    margin-right:5px;
    display:inline-block;
    float:left;
    background-color:#fff;
    border:1px solid #222;
    box-shadow:0 0 5px #000;
    font-family: verdana;
    font-size:12px;
    color: #000;
}

#center {
    width:68%;
    min-width:670.6px;
    margin-left:5px;
    margin-right:5px;
    display:inline-block;
    float:left;
    background-color:#fff;
    border:1px solid #222;
    box-shadow:0 0 5px #000;
    font-family: verdana;
    font-size:12px;
    color: #333;
    text-align:left;
}

#center h2 {
    font-family:tahoma;
    font-weight:bold;
    font-size:18px;
    text-decoration:underline;
    text-align:center;
    color:black;
    letter-spacing:1px;
}

Thanks for any help in advance!

Upvotes: 1

Views: 79

Answers (3)

amburnside
amburnside

Reputation: 1903

add

overflow:hidden

to #main

Because you have set width on your container everything should be kept in the box

Upvotes: 0

skparwal
skparwal

Reputation: 1084

Try this one:

#main_container {
    float:left;
}

See the result

Upvotes: 0

anton_byrna
anton_byrna

Reputation: 2555

You just need to add this:

#main_container:after {
    content: "";
    display: block;
    clear: both;
}

Upvotes: 2

Related Questions