CODEWITHSUNDEEP
cssdynamichtmlparent-child
Jesper Pohl
Jesper Pohl

Reputation: 3

3 divs inside parent div w/o auto resize

I new to webdesign and I wonder how I could do something like this:

..........................
LEFT --- CENTER ---- RIGHT
..........................

Its one parent div in the center of the window, with 3 divs inside like columns. I want them to be dynamic, so they always scale to the browser window.

This is how it looks now.

My current HTML:

<div id="container_m">
    <div id="left">
        <p>My name is Barnabas</p>
    </div>
    <div id="right">
        <p>Till salu</p>
    </div>
    <div id="center">
        <p>Senaste nytt</p>
    </div>
</div>

My currrent CSS:

#container_m
{
    position:absolute;
    height: 40%;
    width: 60%;
    left: 20%;
    top: 45%;
    background-color:rgba(0,0,0,0.2);

}

#left
{
    position: relative;
    height: 100%;
    width: 33%;
    float: left;
    background-color: blue;


}
#right
{
    position: relative;
    height: 100%;
    width: 33%;
    float: right;
    background-color: green;
}

#center
{
    position: relative;  
    height: 100%;
    width: 33%;
    margin:0 auto;
    background-color: yellow;           
}

Upvotes: 0

Views: 2957

Answers (3)

Gerard
Gerard

Reputation: 41

Floating divs can sometimes ruin the auto-resize of the parent div. What I do to ensure proper auto-resize of the parent div is to add this to parent div, just behind the last floating child:

<div style="clear: both;"></div>

This may be a dirty fix or whatever but it ensures the parent div always resizes along with its children.

Upvotes: 4

Eric
Eric

Reputation: 97601

You can simplify that hugely: http://www.jsfiddle.net/fsnuh/

HTML:

ids not needed on each child, as on your website, they are styled identically. classes attached below purely for the colored backgrounds

<div id="container_m">
    <div class="red">
        <p>My name is Barnabas</p>
    </div>

    <div class="yellow">
        <p>Till salu</p>
    </div>

    <div class="green">
        <p>Senaste nytt</p>
    </div>
</div>​

CSS

Styles for left, right and center combined into one. Overuse of position: relative removed.

#container_m
{
    position: absolute;
    height: 40%;
    width: 60%;
    left: 20%;
    top: 45%;
    background-color:rgba(0,0,0,0.2);
}

#container_m div
{
    height: 100%;
    width: 33.33%;
    float: left;
}

.red
{
    background-color: red;
}
.green
{
    background-color: green;
}

.yellow
{
    background-color: yellow;
}​

Upvotes: 0

Thomas Clayson
Thomas Clayson

Reputation: 29925

whats wrong with that? I'm resizing my browser and they seem to be getting bigger and smaller. if you are talking about the fact they're not all inline then you need to do this:

<div id="parent">
    <div id="left">
        Left Content
    </div>
    <div id="center">
        Center Content
    </div>
    <div id="right">
        Right Content
    </div>
</div>

And then float them all left. :)

Upvotes: 0

Related Questions