CODEWITHSUNDEEP
csslayout
NVM
NVM

Reputation: 5552

How do I do the css for this?

enter image description here

I am new to css and this has me stumped.

  1. How do I get the parent div to always contain its children? As soon as I start using floats for alignment the parent stops containing children.
  2. I actually do not want to float things. I want to align them. How do we do alignments and margins in css and not yet hardcode all dimensions?
  3. Can someone kindly profive the css for this? Lets assume for the sake of this example that the total width is 960px and all margins are 15px;

Upvotes: 3

Views: 146

Answers (7)

Konrad Rudolph
Konrad Rudolph

Reputation: 545923

Three alternatives:

  1. Set clear: both on the green element.
  2. Set overflow: hidden on the parent container.
  3. Use clearfix on the parent container.

Upvotes: 7

kapa
kapa

Reputation: 78731

Let's see a clear and flexible version:

#container { background: gray; overflow: hidden; padding: 15px; }
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; } 
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 } 
#footer { background: green; height: 50px; clear: left; }

Even the width and height you see set is unnecessary, boxes can adjust to their content when omitted, I just added them for demo purposes.

Upvotes: 5

Cristi Pufu
Cristi Pufu

Reputation: 9095

Check this out: http://jsfiddle.net/kMQbt/

Html: 

<div id="parent">
 <div id="purple">
     purple
 </div>
 <div id="blue">
     blue
 </div>
 <div id="green">
     green
 </div>
</div>​

Css:

#parent{
 width: 960px;
 background-color: grey;    
 float:none;
 padding-bottom: 15px;
}

#purple{
 width: 200px;
 height: 200px;
 float:left;   
 margin-top: 15px;
 margin-left: 15px;
 background-color: purple;
}
#green{
 width: 930px;
 height: 200px;
 background-color: green;  
 clear: both;
 margin-left: 15px;
}

#blue{
 width: 715px;
 float:left;
 height: 300px;
 margin: 15px;
 background-color: blue;
}

​

Upvotes: 2

pleasedontbelong
pleasedontbelong

Reputation: 20102

The classic way (how i learned to do it) using a clearer element in between

CSS

.clearer{
    clear:both;
}
#parent{
    width:500px;
    background-color:#343434;
    padding:10px;
    color:#fff;
}

#box{
    width:50px;
    height:50px;
    margin:10px;
    float:left;
    background-color:#545454;
}

#variable{
    width:400px;
    float:left;
}

#footer{
    height:40px;
    margin-top:30px;
    background-color:#646464;
}

HTML

<div id="parent">
    <div id="box"></div>
    <div id="variable">
    </div>
    <div class="clearer"></div>
    <div id="footer"></div>
</div>

An example here

Hope this helps

Upvotes: -2

Miqdad Ali
Miqdad Ali

Reputation: 6147

demo http://jsfiddle.net/yTUU6/

HTML

<div id="contaner">
    <div id="top_left">
        left box
    </div>
    <div id="top_right">
        right box<br />
        height will be changed <br />
        <br /><br /> <br /><br />         <br /><br /> <br /><br />       <br /><br /> <br /><br />
    </div>
    <div class="clear"></div>
    <div id="bottom"></div>
</div>

CSS

#contaner{
    width: 100%;
    height: 400px;
    background: #EEEEEE;
}
#top_left{
    width: 30%;
    border:solid 1px;
    height: 200px;    
    float:left;
}
#top_right{
    width:69%;
    float:left;
    border:solid 1px red;
}
.clear{
    clear: both;
}
#bottom{
    height: 100px;
    border: solid 1px green;
}

Upvotes: 0

Prashobh
Prashobh

Reputation: 9552

<div id="container">
<div id="main">
<div id="main_left"></div>
<div id="main_right"></div>
</div>
<div id="last"></div>
</div>

css

#container
{
width:xx;
height:xx;
background:
}
#main
{
width:xx;
height:xx;
}
#main_left{
float:left;
width:xx;
height:xx;
}
#main_right
{
float:right
width:xx;
height:xx;
}
#last
{
clear:both;
width:xx;
height:xx;
}

Upvotes: 0

Shawn Ang
Shawn Ang

Reputation: 538

Use clearfix and assign the class to your container is one of the way to fix your problem.

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

Upvotes: 0

Related Questions