1

i am try css to display div in line

this is my html

<body>
  <div id="main">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
  </div>
   <div id="main_new">
    <div id="div1_new">div1_new</div>
    <div id="div2_new">div2_new</div>
  </div>
</body>

this is my css

#div1{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#div2{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

JSfiddle

here i am set only first div sub two div in one line
but i want to set another two div same as this
div1_new is in below on div1 div2_new is in below on div2

thanks.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
웃웃웃웃웃
  • 362
  • 3
  • 17
  • 32

10 Answers10

1

Try this fiddle http://jsfiddle.net/J7mJX/47/ You need to apply a clearfix

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
Taimour Tanveer
  • 408
  • 3
  • 11
1

CSS for your html:

#div1, #div1_new {
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}

#div2, #div2_new {
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

#main, #main_new {
  overflow:hidden;
}
Natalie
  • 46
  • 2
1

I think this is what you want.

Changed the id names to classes instead. I also put a br tag to separate the divs!

<body>
  <div id="main">
    <div class="divs1">div1</div>
    <div class="divs1">div2</div>
  </div>
    <br/>
   <div id="main_new">
    <div class="divs2">div1_new</div>
    <div class="divs2">div2_new</div>
  </div>
</body>

(display:inline-block; is the code you probably were missing) And here's the adjusted Css:

.divs1{
  border: solid 1px #000000;
  background-color: #0066CC;
    width:70px;
    display:inline-block;
}
.divs2{
  border: solid 1px #000000;
  background-color: #66CC00;
  width:70px;
    display:inline-block;
}

Here's a fiddle link to help:

http://jsfiddle.net/Anicefry/t3Lmw/

T.J. Wallace
  • 154
  • 1
  • 1
  • 13
0

Is that what you want? http://jsfiddle.net/ugktn/

<body>
  <div id="left-col">
    <div>div1</div>
    <div>div1_new</div>
  </div>
  <div id="right-col">
    <div>div2</div>
    <div>div2_new</div>
  </div>

   <div id="main_new">
    middle text   
   </div>
</body>

Css:

body{
  margin: 0;
}
#left-col{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#right-col{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}
Alex
  • 8,055
  • 7
  • 39
  • 61
0

Specify your desired width for all div.Include this in all

width:100px;
float:left;

AVM
  • 592
  • 2
  • 11
  • 25
0

Try to use less divs :-) 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bla! </title>
        <style type='text/css'>
            div {width:50%; float:left}
            div.divRed { background-color:red; }
            div.divGreen { background-color:Green; }
        </style>
    </head>
    <body >
        <div class='divRed'> div1 </div>
        <div class='divGreen'> div2 </div>
        <div class='divGreen'> div1 new </div>
        <div class='divRed'> div2 new </div>
    </body>
</html>
Guy Dafny
  • 1,709
  • 1
  • 14
  • 25
0

Add a <div style="clear:both;"></div> before first container ends

demonofthemist
  • 4,081
  • 4
  • 26
  • 45
0

DEMO

#main {
    width:50%;
    float:left;
}
#main_new {
    width:50%;
    float:right;
}
#div1{
  border: solid 1px #000000;
  background-color: #0066CC;
}
#div2{
  border: solid 1px #000000;
  background-color: #66CC00;
}
#div1_new{
  border: solid 1px #000000;
  background-color: red;
}
#div2_new{
  border: solid 1px #000000;
  background-color: yellow;
}
4dgaurav
  • 11,360
  • 4
  • 32
  • 59
0

If you don't want to change your actual code and use css calculation do this in your css:

body{
  margin: 0;
}
#main{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#main_new{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

http://jsfiddle.net/J7mJX/51/

or if you want them side by side add a width to the body:

body{
  margin: 0;
  width: 113px;
}
#main{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#main_new{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

http://jsfiddle.net/J7mJX/52/

0

Html:

<div id="main-div">
<div style="float:left">div1</div>
<div style="float:right">div2</div>
<div style="clear:both"></div>
</div>

<div id="main-div1">
<div style="float:left">div3</div>
<div style="float:right">div4</div>
<div style="clear:both"></div>
</div>

Css:

#main-div,.main-div1{
  width:90px;
}
Jyoti
  • 11
  • 1