How to position 5 divs inside a div?

HTML & CSS
1

Hello,

I can’t figure out where to float to achive the following:


Picture1   Name          Address1
Picture1   Date            Address1
Picture1   Category

Around everything is a div - like 800px wide, 200px high.
On the left should be one picture (which resides in a div with the attribute float: left).

Then I’d like to have Name, Date and Category beyond each other. They are the difficult things - can’t get them together.
Do I have to float them all left?
Do the need to have something like clear: …?
And Address1 is wrapped in a div as well, which I floated right, so that works fine as well. Just the middle part gives me headache. :-S

Does anybody know what to do there?
Thanks,
Transmitter

2

Hi,

You could just float them as three blocks with suitable widths and then stack everything inside as required.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	clear:both;
	width:820px;
	margin:0 auto;
	border-bottom:1px dotted #000;
	padding:20px 10px;
	background:#f9f9f9;
}
.wrap p{margin:0 0 1em}
.wrap:after {
	content:".";
	clear:both;
	display:block;
	overflow:hidden;
	height:1px;
	visibility:hidden;
}
.pic, .details, .address {
	float:left;
	width:280px;
	margin:0 0 0 10px;
}
.pic { width:200px; }
.details span { display:inline-block:width:100px
}
</style>
</head>

<body>
<div class="wrap">
		<div class="pic"><img src="http://placehold.it/200x100" alt="test"></div>
		<div class="details">
				<p><span>Name</span>: A Picture</p>
				<p><span>Date</span>: 11/04./2014</p>
				<p><span>Category</span>: Cat1</p>
		</div>
		<div class="address">
				<address>
				Unit 1,<br>
				Street name goes here,<br>
				Town,<br>
				City,<br>
				Code
				</address>
		</div>
</div>
<div class="wrap">
		<div class="pic"><img src="http://placehold.it/200x100" alt="test"></div>
		<div class="details">
				<p><span>Name</span>: A Picture</p>
				<p><span>Date</span>: 11/04./2014</p>
				<p><span>Category</span>: Cat1</p>
		</div>
		<div class="address">
				<address>
				Unit 1,<br>
				Street name goes here,<br>
				Town,<br>
				City,<br>
				Code
				</address>
		</div>
</div>

</body>
</html>

Or for IE8+ you could use the display:table-cell approach instead of floats.

Or you could use display:inline-block instead of floats if you want the blocks vertically aligned.

It all depends on what the exact criteria is as there are many ways to do this.

If the data is actually tabllar then you could use an html table instead.

3

The problem is, my HTML looks like this and therefor I need the CSS to deal with the positioning.
Now I’m playing around with display: inline-block but it doesn’t look good yet.
I can’t change the HTML as well since it comes from the CRM.

That’s my situation - the first block

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
    clear:both;
    width:820px;
    margin:0 auto;
    border-bottom:1px dotted #000;
    padding:20px 10px;
    background:#f9f9f9;
}
.wrap p{margin:0 0 1em}
.wrap:after {
    content:".";
    clear:both;
    display:block;
    overflow:hidden;
    height:1px;
    visibility:hidden;
}
.pic, .details, .address {
    float:left;
    width:280px;
    margin:0 0 0 10px;
    display:inline-block;
}
.date, .name, .category {
    float:left;
    width:280px;
    margin:0 0 0 10px;
    display:inline-block;
}
.pic { width:200px; }
.details span { display:inline-block:width:100px }
</style>
</head>

<body>
<div class="wrap">
        <div class="pic"><img src="http://placehold.it/200x100" alt="test"></div>
        <div class="name">The Name</div>
        <div class="date">The date</div>
        <div class="category">The Category</div>
        <div class="address">
                <address>
                Unit 1,<br>
                Street name goes here,<br>
                Town,<br>
                City,<br>
                Code
                </address>
        </div>
</div>
<div class="wrap">
        <div class="pic"><img src="http://placehold.it/200x100" alt="test"></div>
        <div class="details">
                <p><span>Name</span>: A Picture</p>
                <p><span>Date</span>: 11/04./2014</p>
                <p><span>Category</span>: Cat1</p>
        </div>
        <div class="address">
                <address>
                Unit 1,<br>
                Street name goes here,<br>
                Town,<br>
                City,<br>
                Code
                </address>
        </div>
</div>

</body>
</html>
4

Hi,

If you can’t change the html then its not really possible to accomplish what you need unless your image is a known fixed height. If that is true then you can absolutely place the image and account for its height by setting a min-height on the wrap. That will allow the other two blocks to be aligned if the name,date and category are floated left and the address is display:inline-block.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	clear:both;
	width:590px;
	margin:0 auto;
	border-bottom:1px dotted #000;
	padding:10px 10px 10px 210px;
	background:#f9f9f9;
	position:relative;
	min-height:100px;/* height of image */
}
.wrap p { margin:0 0 1em }
.wrap:after {
	content:".";
	clear:both;
	display:block;
	overflow:hidden;
	height:1px;
	visibility:hidden;
}
.address {
	display:inline-block;
	width:280px;
	margin:0 0 0 10px;
	vertical-align:top;
}
.pic {
	position:absolute;
	left:0;
	top:10px;
}
.date, .name, .category {
	width:280px;
	float:left;
	clear:left;
}
.pic { width:200px; }
</style>
</head>

<body>
<div class="wrap">
		<div class="pic"><img src="http://placehold.it/200x100" alt="test"></div>
		<div class="name">The Name</div>
		<div class="date">The date</div>
		<div class="category">The Category</div>
		<div class="address">
				<address>
				Unit 1,<br>
				Street name goes here,<br>
				Town,<br>
				City,<br>
				Code
				</address>
		</div>
</div>
<div class="wrap">
		<div class="pic"><img src="http://placehold.it/200x100" alt="test"></div>
		<div class="name">The Name</div>
		<div class="date">The date</div>
		<div class="category">The Category</div>
		<div class="address">
				<address>
				Unit 1,<br>
				Street name goes here,<br>
				Town,<br>
				City,<br>
				Code
				</address>
		</div>
</div>
</body>
</html>

If the image has an unknown height or the height of the image changes in each block then what you are asking is (probably) impossible in the structure you have.

5

That’s getting difficult - I was hoping that it would work out with a few CSS classes.
In that case I’m looking into overwriting the template output - maybe I can really get your first suggestion working. :slight_smile:
Thank you.