CODEWITHSUNDEEP
htmlcsscss-float
웃웃웃웃웃
웃웃웃웃웃

Reputation: 362

Two div in a line and other two on the next line

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.

Upvotes: 1

Views: 238

Answers (10)

T.J. Wallace
T.J. Wallace

Reputation: 164

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/

Upvotes: 1

Natalie
Natalie

Reputation: 46

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;
}

Upvotes: 1

Jyoti
Jyoti

Reputation: 11

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;
}

Upvotes: 0

user3546546
user3546546

Reputation:

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/

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

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;
}

Upvotes: 0

demonofthemist
demonofthemist

Reputation: 4199

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

Upvotes: 0

Guy Dafny
Guy Dafny

Reputation: 1829

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>

Upvotes: 0

AVM
AVM

Reputation: 592

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

width:100px;
float:left;

Upvotes: 0

Taimour Tanveer
Taimour Tanveer

Reputation: 408

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

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Upvotes: 1

Alex
Alex

Reputation: 8072

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;
}

Upvotes: 0

Related Questions