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

 

Forcing Right Div to fill space

 
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 >> Forcing Right Div to fill space
Page: [1]
 
BeTheBall

 

Posts: 6336
Joined: 6/21/2002
From: West Point Utah USA
Status: offline

 
Forcing Right Div to fill space - 1/2/2008 12:45:21   
Happy New Year CSS gurus. I am having a little trouble with a fairly simple two-column layout. I want a fixed width for my left column and then want the right column to fill in the rest of the space. I have the two columns nested within another div set to 99% width. Problem is, when my content in the right div is narrow, the page does not fill in the entire remaining width. Here is the CSS:

.main_content {
	margin: 0 auto;
	width: 99%;
}

.sd_left {
	float:left;
	color: #000;
	margin: 0;
	padding: 0px 0px 0px 0px;
	width: 180px;
	font: 1.3em arial, helvetica, verdana, sans-serif;
}	

.sd_right {
 	background: #fff url(../images/back_white.jpg) repeat;
    clear: both;
    float: right;
	color: #000;
	margin: 0px;
	padding: 10px 0px 10px 10px;
	font: 1.2em arial, helvetica, verdana, sans-serif;
}	


Here is a screen capture of what I am getting on narrow pages.

Attachment (1)

_____________________________

Duane

Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
Tailslide

 

Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Forcing Right Div to fill space - 1/2/2008 15:11:05   
Well you could just float them both to the left which would possibly look neater - give less of a gap on the left.

If you're floating divs they must have a width too - which would cause a problem if you don't actually know what the width is with one div being fluid.

You might want to consider instead of having two divs floating next to each other, have the left div floating (with a fixed width) inside of the div containing the right-hand content which would take up the remaining space, whatever that is, minus a left margin of 180px.

Here's another way of doing it that looks pretty easy: http://css-tricks.com/examples/PerfectFluidWidthLayout/

< Message edited by Tailslide -- 1/2/2008 15:21:38 >


_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to BeTheBall)
BeTheBall

 

Posts: 6336
Joined: 6/21/2002
From: West Point Utah USA
Status: offline

 
RE: Forcing Right Div to fill space - 1/2/2008 16:01:34   
Thanks Helena. I'll have a look at the example you sent. I found a work around, but it has me a bit uneasy. All I did was give my <h2> element a width of 100% and that seemed to fix my problem, however, like I said, not sure how comfortable I am with that "fix".

_____________________________

Duane

Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.

(in reply to Tailslide)
jaybee

 

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

 
RE: Forcing Right Div to fill space - 1/2/2008 17:55:17   
On my site I set up a container div then within that two columns of say 75% and 25%.

Floated one left with a clear, then the other floated right.

Both resize but if you want the smaller one to not get too narrow you could specify a min width or put a graphic in it which will force it to stay that width. Only needs to be 1 pixel high and whatever width you need.

If you're using graphics for buttons they'll do the same thing as long as they're not specified as backgrounds.

_____________________________

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

:)
GAWDS
Now where did I put that Doctype?

(in reply to BeTheBall)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Forcing Right Div to fill space
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