How to align divs next to each other?
I am trying to set these divs this way:
but they end up either overlapping each other (.title takes the full width of the container), or below each other. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
source to share
According to best practice:
Place Pic in one box and three other rectangles on the right in one box and use or for them . float:left
**display:inline-block**
Here's the code for it:
Html
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is a working fiddle: http://jsfiddle.net/7xLyc3q1/
source to share
You have many answers here, but none of them explain what is really going on here. There is float
something important to understand in use: floating point items are lifted out of the box model and have virtually zero width and height compared to other items. There is a workaround for this: by specifying parentoverflow:hidden
in the element , floating elements will stop "collapsing".
Here's an example that demonstrates this. Note that the header, content and footer have width:100%
and they only fill the remaining space - this is probably what you expect. Note also that there is no need to float to the right ... they take up the remaining space.
source to share
Try adding float: right
to .title
, .content
and .footer
.
It's also worth considering using Foundation or Twitter Bootstrap . Both have grid systems, so this will ensure the divs resize to fit any screen size.
source to share
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
source to share
Here's one way to do it, if you can specify the width of the image. I assumed that this demo will be a 200px wide image.
Try using the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up the place to place the image. Add 200px width to the left
.wrapper
.
The padding will force .title
, .content
and .footer
align 200px from the edge of the wrapper.
The .pic
set width 200px (or less) and set on the left margin -200px to move it to completion.
Finally, set the correct width to .wrapper
600px. The total width .wrapper
will be calculated to 800px (width 600px + 200px left) - -200px left margin from float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main advantage of this approach is that you don't need to add any other packaging elements. (If you are using floats, additional wrappers are needed.)
source to share
There's a lot easier css-only without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need :
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
source to share
You can use this code and it works according to your design.
HTML code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
source to share