CODEWITHSUNDEEP
csshtml
Tautvydas
Tautvydas

Reputation: 1288

CSS creating 3 div blocks in one line, div structure

enter image description here

Maybe anyone could help me with divs structure which would represent image above and if there are any special css parameters of holder div, or other add them too?

Upvotes: 2

Views: 30480

Answers (6)

alexb
alexb

Reputation: 971

The are many ways to do that, one of them is with relative-float

<div style="position:relative">
    <div style="float:left; width: 50px; height:100px; background-color:red;">Block1
    </div>
    <div style="float:left; width: 50px; height:100px; background-color:blue;">Block2
    </div>
    <div style="float:left; width: 50px; height:100px; background-color:green;">Block3
    </div>
</div>

This generates something like

demo

Upvotes: 9

Talha Akbar
Talha Akbar

Reputation: 10030

Working Fiddle

CSS:

.div {
display:inline-block;
width:150px;
height:400px;
margin:0;
}
#one {
background:green;
}
#two {
background:red;
}
#three {
background:blue;
}

HTML:

<div class="div" id="one"></div>
<div class="div" id="two"></div>
<div class="div" id="three"></div>

You can use CSS display property. And Specifying inline-block.

Upvotes: 2

FurloSK
FurloSK

Reputation: 479

How about:

<div>a</div>
<div>b</div>
<div>c</div>

with CSS:

div {
  width: 33%;
  border: 1px solid red;
  float: left;
}

?

Upvotes: 3

madhead
madhead

Reputation: 33422

Take look at this JS Fiddle code:

<div class="_1">Red</div>
<div class="_2">Green</div>
<div class="_3">Blue</div>

div {
    display:inline-block;
    width:100px;
    height:200px;
}

._1 {
    background-color:red;
}

._2 {
    background-color:green;
}

._3 {
    background-color:blue;
}

Upvotes: 1

Jerome Cance
Jerome Cance

Reputation: 8183

three div : 

<div></div><div></div><div></div>

with css : 

div {
 display: inline-block;
}

put into these div all content you want.

You can also use float:left instead of display property.

If you want a liquid layout (first and last div have a fixed width and the middle one take all the needed space), you can :

.firstDiv {
  float: left;
  width: 200px;
}

.lastDiv {
  float: right;
  width: 200px;
}

.middleDiv {
  margin-left: 200px;
  margin-right: 200px;
}

you can also use absolute positioning : 

body {
  position: relative;
}

.firstDiv {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 200px;
}

.lastDiv {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 200px;
  right: 200px;
}

.middleDiv {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 200px;
}

Upvotes: 2

Sowmya
Sowmya

Reputation: 26969

If you are asking for html code to get the visual done as shown in your question, this is the place http://csslayoutgenerator.com/, where you can generate the html layouts.

Upvotes: 2

Related Questions