15 replies [Last post]
talino
Offline
Regular
Paris, France
Last seen: 10 years 51 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Hi.

I'm trying to do a layout which is giving me a major headache.

Imagine a series of boxes (a div element) of the same width but of varying heights, one below the other. The width of the boxes is specified in pixels or percentage. Each box contains two elements:

1. A <p> tag aligned to the left. Its width is specified to approximately half the box's width.
2. A <img> tag aligned to the right. The image width fills the other half of the box.

The height of each box should be determined by either the image height or the paragraph height, whichever is taller.

The number of boxes should be flexible since it is determined by a PHP script, as are the images and the text (i.e. I could have done this if I was just trying to replicate the attached image).

I've tried doing it with floats but then the floated element doesn't influence the box's height.

Does anyone have an idea on how to do this?

Thanks.

P.S. I've added an attachment (made in Photoshop...) of what I would like to achieve.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 44 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Layout question for CSS experts

Floats shoudl work, as long as you clear them.

Can you show us the code you've tried?

Verschwindende wrote:
  • CSS doesn't make pies

talino
Offline
Regular
Paris, France
Last seen: 10 years 51 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Layout question for CSS experts

Floats don't seem to work because a float doesn't stretch the DIV which contains it, therefore the surrounding box has zero height and I can't put other boxes underneath it.

I'll try to get some code up here because I tried it a zillion times and now I have to recode the PHP routines in order to revert to my original idea. I was hoping someone had tried it before and made it work.

Thanks.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Layout question for CSS experts

The problem is that floats are removed from the documnt flow so contribute no height to their parent. Utilising Tony's clearfix solution should do the trick.

Something like

<div id="boxes">
	<div class="clearfix">
		<img src="image1.gif" />
		<p>sajh dhkjas dhjka shd kasd kjas hdkhaskdj hak dhaksd hkjadh kajh dkjah skjdhaskjdhaksdh kaj dkjas dkja dkj kdjh akjda kjd askj dhakjs d</p>
	</div>
	<div class="clearfix">
		<img src="image2.gif" />
		<p>sajh dhkjas dhjka </p>
	</div>
	<div class="clearfix">
		<img src="image3.gif" />
		<p>sajh dhkjas dhjka shd kasd kjas hdkhaskdj hak dhaksd hkjadh kajh dkjah skjdhaskjdhaksdh kaj dkjas dkja dkj kdjh akjda kjd askj dhakjs dsajh dhkjas dhjka shd kasd kjas hdkhaskdj hak dhaksd hkjadh kajh dkjah skjdhaskjdhaksdh kaj dkjas dkja dkj kdjh akjda kjd askj dhakjs dsajh dhkjas dhjka shd kasd kjas hdkhaskdj hak dhaksd hkjadh kajh dkjah skjdhaskjdhaksdh kaj dkjas dkja dkj kdjh akjda kjd askj dhakjs d</p>
	</div>
</div>

and

.clearfix:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix
{
	display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix
{
	height: 1%;
}

.clearfix
{
	display: block;
}
/**/

#boxes
{
	width: 300px
}

#boxes div
{
	border: solid 1px indianred;
	padding: 4px;
	margin: 4px;
}

#boxes p
{
	float: left;
	width: 50%;
}

#boxes img
{
	float: right;
}

Is roughly what you want I think

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 44 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Layout question for CSS experts

talino wrote:
Floats don't seem to work because a float doesn't stretch the DIV which contains it, therefore the surrounding box has zero height and I can't put other boxes underneath it.

thepineapplehead wrote:
Floats shoudl work, as long as you clear them.

Verschwindende wrote:
  • CSS doesn't make pies

talino
Offline
Regular
Paris, France
Last seen: 10 years 51 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Layout question for CSS experts

Thanks a lot briski for the detailed example. Let me dig deeper into it and I'll let you know what happens. Smile BTW I've never seen or used the content attribute before.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Layout question for CSS experts

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout question for CSS experts

[footnote]
We're back to using inline-block now to accommodate IE7

.clearfix
{
display: inline-block;
}

Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

talino
Offline
Regular
Paris, France
Last seen: 10 years 51 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Layout question for CSS experts

Thanks for all your help. OK, this seems to be a step in the right direction, although there are problems (I've drafted out a non-PHP version at www.talino.org/test/). I've added red borders for my existing layout (the #content div is equivalent to the #boxes div in the example) and green borders for the box class div.

1. Safari, Firefox (Win) & IE6 (Win) all make the text flow under the images when it's too long and when there is a new paragraph (especially unsightly, sensitive designers beware).

2. For some reason, Safari show the image in the sixth box as almost centered. This is weird because all the divs are the same.

3. Firefox (Win) makes the first box be as tall as the #navBar div on the left (the one with a red border from my original layout, currently empty but needed to hold images and text). I don't have a clue why. The #navBar div height is specified in pixels and if I change it then the first box follows suit.

Otherwise it looks pretty cool Smile I didn't think it was possible. I only understood half of the hack but as long at it works. Any ideas on solving the three problems?

Thanks again.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Layout question for CSS experts

1. don't float the p left.

2. interesting - I can replicate but don't see the problem. It's not the image it's the size of the div.box. The only thing I can think of is lack of a doctype (it's a stretch, but you should have one anyway).

3. FF/Mac does this also. It's because of the clear:both in the .clearfix. You could either change it to clear:right (which would work in your layout without future changes) or drop the .clearfix method and use overflow:hidden (on .box) to contain the floats.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 24 min 6 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9775
Points: 3857

Layout question for CSS experts

The Wolf got it in #1. This will fix it;

div.box p {
	width:50%;
}

Why, you ask? Because of the way floats work. You have the image to the right, and you're adding paras that float left. The floats slide up the side opposite the float direction until they bump into something. Then they move in the direction of the float until they bump something, then settle as high as possible.

Follow this action with the .box headed "The Soft Body" (wrong header level, btw[1]). The para slides up the right side 'til it bumps the image, slides left 'til it bumps something (the left side of the container), then nestles upward. This works for the first two paras. The third slides up the right side, bumps the image and slides left 'til it bumps … para two. And there it lies.

You absolutely must have a proper DTD to ensure that browsers are in standards mode and those with the capability follow the same set of rules (the W3 css recs) to the best of their abilities.

cheers,

gary

[1] On any page, there is one h1, the page header. Think of it as the chapter title. Below that level are sections, h2; sub-sections, h3; sub-sub-sections, h4 and &c.. There should be a direct relationship between the header levels and a generated ToC of the page.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

talino
Offline
Regular
Paris, France
Last seen: 10 years 51 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Layout question for CSS experts

Thanks a lot to everyone. Really.

Wolf:

1. Not floating the <p> indeed works.

2. I forgot the doctype in the non-PHP test version but it's there now, still no change in this very weird bug. The only thing that happened when I added it was that the vertical margin between the box increased in Safari (but not anywhere else). Go figure.

3. Clearing right solved the problem. I tried replacing clear:both by overflow:hidden and got a nasty mess, so I'm sticking to your first solution.

One thing that intrigues me is the display:inline-block. I've never used it before (I'll be searching around for a definition), but I tried a display:block instead and everything looks exactly the same. So I wonder why I needed display:inline-table in the first place.

Page now looks good in all three browsers I tested (Safari, FF/Win & IE6).

Gary:

Thanks for clearing up this floating business. Since the site is really simple, I'll be keeping everything at H1. You can check the video section to see what I did with H2 but anyway, I think what matters is that raw markup without style can still be legible (and I believe it is).

Cheers to all.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout question for CSS experts

Talino,
The display:inline-block or inline-table line is there for IEMac. Originally it was inline-block but that did not validate to the CSS2 profile so it was changed to inline-table which did and had the same effect.

The lines following that one starting with /* \*/ hide the rules from IEMac and reset the display property for modern browsers to block. The height rule is for IE6 to force it to expand the float container.

The .clearfix display:inline-table line is now back to being inline-block due to the fact that IE7 will not read the star selector filter feeding the height:1% to IE6 but will read this rule and trigger hasLayout mode which is actually what forces IE to enclose floats it can also safely read the following display:block reset line as once set hasLayout can not be reset or undone. In effect the height filter is redundant.

On the question of the headings H1, as I think Gary pointed out, should actually only be used the once, and headings should provide a semblance of a TOC structured from top to bottom large to small.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Layout question for CSS experts

Hugo wrote:
On the question of the headings H1, as I think Gary pointed out, should actually only be used the once, and headings should provide a semblance of a TOC structured from top to bottom large to small.

Yes, I think you actually get a WCAG Priority Level 2 or 3 error if your heading tags are out of sequence as you move down the page (e.g. have a h3 appear before a h2).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

talino
Offline
Regular
Paris, France
Last seen: 10 years 51 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Layout question for CSS experts

Your help has done wonders. I can now stack up multiple images, add captions (or not), do whatever I want and the boxes always get the right height. Amazing!

www.talino.org/tutorials/balloon/
www.talino.org/tutorials/exp1/

(although don't check out the french versions yet Smile

Still, lots of markup needs to be changed but you can't have everything (or so I'm told).

Cheers.

BTW The Safari bug which makes two images in the balloon page not stick to the right side properly has something to do with the paragraph length on the left. If I add some sentences then everything's properly aligned. A pain, but hey...

BTW2 They should really add an attribute in CSS3 for a border length in percentage, centered or not etc. Just my 2c.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Layout question for CSS experts

the overflow:hidden I mentioned was not to be used in place of clear:both - it was to replace the entire .clearfix method. Simply apply overflow:hidden to .box (and remove .box:after declaration) to contain the floats. Still looking into Safari...

edit: actually Safari 1.3.2 is displaying correctly now.