Vertically aligning content boxes... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> Vertically aligning content boxes... (7/19/2006 10:14:13)

Apologies for not being able to post a URL here, I can't seem to log into my hosts server right now, so here's a screen shot to explain what I'm trying to do.

The two grey boxes in the middle aren't actually told what height to be at the moment, although I'm reasonably happy with their content, eventually one box might end up with more info in than the other and therefore one will be longer than the other.

I really want both boxes to be the same height, i.e. the height of the one with the most information in, but declaring a height in my CSS is sending the images partly outside the boxes when text size is increased.

Hope you know what I mean.

Here's my CSS for these 2 boxes and the one below them. 

/******************** Opening Page Boxes ********************/

#box1	 						{ width: 230px; float: left; border: 1px solid #ccc; margin: 0px 8px 16px 16px; padding: 0; 
								background: #e0e0e0 url('../images/nix4.png') no-repeat bottom right; display: inline; }

#box2							{ width: 230px; float: left; border: 1px solid #ccc; margin: 0px 8px 16px 16px; padding: 0; 
								background: #e0e0e0 url('../images/nix5.png') no-repeat bottom right; display: inline; }

#box3							{ width: 484px; border: 1px solid #ccc; clear: both; margin: 0px 16px 0px 16px; float: left; 
								background: #e0e0e0 url('../images/albury-wodonga.png') no-repeat bottom left; display: inline; }


Any insight would be great, thanks

Nicole

[image]local://upfiles/12879/7810A04FAF264AA4BC0C2FDF49647B33.jpg[/image]



jaybee -> RE: Vertically aligning content boxes... (7/21/2006 17:28:02)

Have you tried a clear?



Nicole -> RE: Vertically aligning content boxes... (7/22/2006 2:22:15)

Sure, I have clear: both on the third box, the one underneath the two boxes that are side-by-side.

As it turns out I'm happy with the content I have in both of these side-by-side boxes, but if I do decide to change content in one of the boxes then that box will extend longer then the other box, even though the box underneath will stay in position because of the clear: both.

If it were a table layout, I'd have two table cells alongside each other, set a background colour for both of them, and that row of cells would all be the height of the cell with the most content.

I found this possible solution today and think it might be suitable but at the moment I am satisfied that I won't be changing the content so for this site it's okay. But if I use this site as a template, chances are I'll need to know how to do this as I'm sure it's a pretty basic thing to learn, even though I can't seem to find much info on it.

The screenshot in the first post is now uploaded so here's the link:

http://www.users.on.net/~nicoleoz/



Nicole -> RE: Vertically aligning content boxes... (8/2/2006 3:43:31)

This screenshot of the opening page in my new site:

http://www.users.on.net/~nicoleoz

is taken using Konquerer, and the problem is happening as my selection of fonts in the font-family is pushing one box lower than the other. I don't mind these boxes being pushed longer but I'd like them to stay height as each other.

Has anyone any suggestions as to how I might keep both the top boxes the same length?

Thanks

Nicole

[image]local://upfiles/12879/6FD231FE6DEE4D269D6CC2A14CB9EEF4.jpg[/image]



d a v e -> RE: Vertically aligning content boxes... (8/2/2006 4:55:37)

this might help http://alistapart.com/articles/fauxcolumns/ but not sure how you can incoporate it into your design, whether it might involve an extra div as a wrapper



Nicole -> RE: Vertically aligning content boxes... (8/2/2006 5:06:56)

Thanks Dave,

I think it's on the right track, and I think I could incorporate that, the problem being however, is how to get that background to stop at the end of the content in those 2 boxes (as I have them now) and let the normal background take over again. Bearing in mind that this problem is only occuring when text size is increased 3 times (I think) and in Mac browsers because of the font-family as previously mentioned.

Nicole



d a v e -> RE: Vertically aligning content boxes... (8/2/2006 5:41:35)

what if you wrap those 2 boxes in a div and apply the coloured background to the wrap?



Nicole -> RE: Vertically aligning content boxes... (8/2/2006 5:52:53)

It's getting more complex isn't it? Remember I'm pretty new to CSS positioning. I understand what you're saying but 2 things come to mind:

1. I have a very slightly different colour border around those boxes that I like because it seems to separate them from the other background colour.

2. Those boxes both have a different background image, i.e. the words "creation" and "redesign".

3. I know, I can't count, is having many nested divs a problem just like nested tables?

I've just noticed something else which I'm not happy about Dave, I added focus to the nav links so the destination text would appear underneath when using tabbing, but having just had that page open where I'd tabbed to one of the menu items, I moved the mouse over the other menu items and the destination description text appears over the top of the opened tabbing text if you know what I mean?

Nicole



d a v e -> RE: Vertically aligning content boxes... (8/2/2006 5:58:14)

the backgrouns could be a problem then!

see what you mean about the mouse and the tab but who uses both at the same time except web designers?! ;) seriously users are going to use one or the other not both at the same time surely?? either you're tabbing throught with the keyboard because your motor skills aren't up to using a mouse, or you're using a mouse. or what :)



Nicole -> RE: Vertically aligning content boxes... (8/2/2006 6:06:44)

True, and they'd have to bump the "tab" key about 10 times to "accidentally" have one of the menu items open with the tab.

These problems are good things to know though, including the length of the 2 boxes problem. It's unlikely to occur to too many people but at least I know about them. I'll select another mac font if possible to add to the font-family which might work, but i did think, being new to CSS positioning, that this may be a reasonably common problem.

Thanks Dave!

Nicole



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875