navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Vertically aligning content boxes...

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Vertically aligning content boxes... 		Page: [1]
 
Nicole

 

Posts: 2831
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

  		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


Thumbnail Image
:)

Attachment (1)

_____________________________

:)
jaybee

 

Posts: 14157
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		RE: Vertically aligning content boxes... - 7/21/2006 17:28:02   
Have you tried a clear?

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to Nicole)
Nicole

 

Posts: 2831
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

  		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/


_____________________________

:)

(in reply to jaybee)
Nicole

 

Posts: 2831
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

  		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


Thumbnail Image
:)

Attachment (1)

_____________________________

:)

(in reply to Nicole)
d a v e

 

Posts: 4087
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		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

_____________________________

David Prescott
Gekko web design

(in reply to Nicole)
Nicole

 

Posts: 2831
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

  		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

_____________________________

:)

(in reply to d a v e)
d a v e

 

Posts: 4087
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		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?

_____________________________

David Prescott
Gekko web design

(in reply to Nicole)
Nicole

 

Posts: 2831
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

  		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

_____________________________

:)

(in reply to d a v e)
d a v e

 

Posts: 4087
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		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 :)

_____________________________

David Prescott
Gekko web design

(in reply to Nicole)
Nicole

 

Posts: 2831
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

  		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

_____________________________

:)

(in reply to d a v e)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Vertically aligning content boxes... 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2008 All Rights Reserved
  Click here to view our privacy statement.