CODEWITHSUNDEEP
htmlcss
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

margin is not working as it should work

I wanted to achieve like this

+-----------+----------------+----------------+
|           |                |                |
+-----------+----------------+----------------+

but got like this

+-----------+----------------+
|           |                |
+-----------+----------------+----------------+
                             |                |
                             +----------------+

Here is DEMO

Upvotes: 1

Views: 127

Answers (10)

Raj Nathani
Raj Nathani

Reputation: 2845

  • The div with class '.two' (which is the middle of the 3 boxes) is a block element without any given float of left or right, therefore it will clear and take up the remaining space of the first line.
  • And also, the margins you've added to '.two' aren;t required.
  • Finally you forgot the '.cf' (code for clearfix) in the css.

Here is a possible solution: http://jsfiddle.net/bFqTv/28/ 

.wrap{width: 500px; background: red; position: relative; margin: 0 auto;}
.one{width: 200px; float: left; background: blue;}
.three{width: 200px; float: left; background: blue;}
.two{ width:100px; float:left;}

/**Source:http://nicolasgallagher.com/micro-clearfix-hack/**/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}


/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Upvotes: 0

Scott Bartell
Scott Bartell

Reputation: 2840

You just need to do two things:

  1. Float all inner elements left with float: left;
  2. Give all innerelements a width: width: 33%

Updated CSS:

.wrap{
  width: 500px;
  margin: 0 auto;
}
.one, .two, .three {
  float: left;
  width: 33%;
}
.one, .three {
  background-color: blue;
}
.two{
  background-color: red;
}

You HTML:

<div class="wrap cf">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

Here's a working example: http://jsfiddle.net/bFqTv/29/

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Your code is fine, but you need to change the order of the elements:

<div class="wrap cf">
    <div class="one">one</div>
    <div class="three">three</div>
    <div class="two">two</div> <!-- put the element without class right to the end -->
</div>

http://jsfiddle.net/bFqTv/30/

Upvotes: 3

Hariharan
Hariharan

Reputation: 3263

.wrap{width: 500px; background: red; position: relative; margin: 0 auto}
.one{width: 100px; float: left; background: blue;}
.three{width: 100px; float: left; background: blue;}
.two{width:100px; float: left;}

If require background red for second div use below

.wrap{width: 500px; background: red; position: relative; margin: 0 auto}
.one{width: 100px; float: left; background: blue;}
.three{width: 100px; float: left; background: blue;}
.two{width:100px; float: left; background: red;}

Thanks

Upvotes: 0

Rahul
Rahul

Reputation: 5636

In you first class name in HTML is wrap cf but you are using only wrap in your CSS.I think you need to set your 3 div inside 500px width.Use CSS like i mentioned

.wrap cf{width: 500px; background: red; position: relative; margin: 0 auto;}
.one{width: 200px; background: blue;float: left}
.three{width: 100px; background: green; float: left}
.two{width: 200px;  background: red; float: left }

This CSS works well on my side.Hope it works on your side as well.

Upvotes: 0

user2289659
user2289659

Reputation:

Use following CSS if you don't want to increase the width:

.wrap cf{width: 500px; background: red; position: relative;}
.one{width: 200px; float: left; background: blue;}
.three{width: 200px; background: blue;float:left;}
.two{width:200px;float:left;background:red;}

Upvotes: 4

K Groll
K Groll

Reputation: 518

This is one way to do it:

.wrap{width: 500px;overflow:hidden; background: red; position: relative; margin: 0 auto;}
.one{width: 200px; float: left; background: blue;}
.three{width: 200px; float: left; background: blue;}
.two{width: 100px; float: left;}

NB clear the float properly rather than just overflow: hidden

Upvotes: 0

itsols
itsols

Reputation: 5582

If all you need to do is keep those DIVs (one, two and three) in a row, they all need to fit within 500px like this:

.wrap{width: 500px; background: red; position: relative; margin: 0 auto;}
.one{width: 200px; float: left; background: blue;}
.three{width: 100px; float: left; background: blue;}
.two{width: 200px; float: left; background: red;}

Also note that I've given width for every DIV

Upvotes: 0

Borniet
Borniet

Reputation: 3546

You have a wrapper of 500px, and try to fit three (3) boxes in it of 200px? That just can't work... Enlarge your wrapper until it fits the sum of all the boxes you want to have in it. Or make your boxes smaller...

Oh, and make sure you enlarge your window enough to show the full xxx pixels...

Upvotes: 0

Satya
Satya

Reputation: 8881

you need to increase the width in .wrap , I increased it to 800 and all are in one line

Upvotes: 0

Related Questions