CODEWITHSUNDEEP
csslayoutcss-floatalignment
Erick Ribeiro
Erick Ribeiro

Reputation: 766

How to align 2 divs inside one div container with CSS (see image)

I am making a little layout width exactly 6 divs, and I tried various times to align it with float align, clear:both and changing height/width, but without success. I want something like this image: https://i.sstatic.net/j1jxX.png

HTML source:

    <div id="description">
    <div class="itemDescription"><!--Item 1-->
        <div class="imageDescription"></div>
        <div class="textDescription">
            <div class="titleDescription">Encontre pessoas</div>
            <div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
        </div>
    </div>
        <div class="itemDescription"><!--Item 2-->
        <div class="imageDescription"></div>
        <div class="textDescription">
            <div class="titleDescription">Encontre pessoas</div>
    <div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
    </div>
</div>

CSS source:

#description {
width: 96%;
background: rgb(244, 244, 0);
}
.itemDescription {
padding: 8px;
border: solid 1px red;
}
.imageDescription {
float: left;
height: 72px;
width: 20%;
background-image: url(http://addons.opera.com/media/extensions/75/86675/1.0-rev2/icons/icon_64x64.png);
background-position: center center;
background-repeat: no-repeat;
border-right: solid 3px black;
}
.textDescription {
float: left;
width: 70%;
border: solid 3px blue;

}
.titleDescription {
border: solid 3px brown;

}
.detailDescription {
border: solid 3px black;
padding: 10px;
}

here is my JSFiddle: http://jsfiddle.net/5xhQk/

Thanks too all you

Upvotes: 1

Views: 5490

Answers (3)

Zlatko Soleniq
Zlatko Soleniq

Reputation: 388

Try somethign like:

HTML:

<div class="itemDescription">
    <div class="imageDescription ">
        Your image
    </div>
    <div class="cl">&nbsp;</div>
    <div class="textDescription">
        some header
        some paragraph
    </div>
</div>

CSS:

.cl{
clear:both;
}
.itemDescription {

    width: something;

}

.imageDescription {

    float: left;
    width: something;
}

.textDescription {
    float: right;
    width: something;
}

Upvotes: 0

Zlatko Soleniq
Zlatko Soleniq

Reputation: 388

Let me see if i got it, u want to align the imageDescription and textDescription in the itemDescription

Upvotes: 0

Chanckjh
Chanckjh

Reputation: 2597

You could also use table to get what you want but if you really want to use div, you need to use float in every div. Something like this: http://jsfiddle.net/5xhQk/1/

#description{
  float: left;
  width: 100%;
}

.itemDescription{
  float: left;
  width: 100%;
  height: 72px;
}

.imageDescription{
  background: blue;
  float: left;
  width: 20%;
  height: 100%;
  border: 1px solid black;
}

.textDescription{
  float: left;
  width: 70%;
  height: 100%;
  border: 1px solid black;
  border-left: 0;
}

.titleDescription{
  float: left;
  width: 100%;
  border-bottom: 1px solid black;
}

.detailDescription{
  float: left;
  width: 100%;
}

Oh and I dont understand why in your picture it is width 20% and 70%, what are u going to do with the rest 10%?

Upvotes: 1

Related Questions