Problem with CSS - Webmaster Forum - Web Design, Programming and SEO forums

11-27-2005, 07:46 PM

sketchie

Status: Senior Member
Join date: Jul 2005
Location:
Expertise:
Software:

Posts: 835

iTrader: 1 / 100%

sketchie is on a distinguished road

Problem with CSS

I have div wrapping around two divs (one of these divs is floating to the right).

I'm having a problem with this div that floats to the right, it floats fine but if it becomes taller than the other div, it goes straight passed the div that wraps around it.

CSS:

Code:

#maincontainer
{
top: 10px;
border: 1px solid #cacaca;
margin: 5px;
padding: 1px;
}

#right
{
float: right;
margin: 0;
padding: 1px;
padding-left: 5px;
width: 203px;
background-color: #ECEAEB;
font-size: 12px;
}

#content
{
padding: 1px;
margin: 1px;
width: 520;
}

HTML:

HTML Code:

<div id="maincontainer">
	  <div id="right"><span class="subheader">Navigation<br/></span>
	            <a class="navi" href="#">Home<br/></a>
				<a class="navi" href="#">What is PHP?<br/></a>
                <a class="navi" href="#">Beginner Tutorials<br/></a>
				<a class="navi" href="#">Search<br/></a>
	  </div>
		<div id="content"><span class="subheader">News<br/></span>
  		<span class="text">Well isn't this some nice news for you all... yes in dooodably...</span></div>
		
	</div>

Can anyone tell me why it does this, and how to fix it?

11-27-2005, 08:21 PM

Yang

Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:

Posts: 460

iTrader: 0 / 0%

Yang is on a distinguished road

Send a link to the page with this problem.

11-27-2005, 08:43 PM

sketchie

Status: Senior Member
Join date: Jul 2005
Location:
Expertise:
Software:

Posts: 835

iTrader: 1 / 100%

sketchie is on a distinguished road

http://phpbrain.net/v2/template.htm

The navigation is the problem, I've purposely made it longer but that's how it would look if there was content in there..

Though if you know how, I would like to know how to make that div extend to the length of the grey border around it (if you get what I mean).

11-27-2005, 09:14 PM

Jonny

Status: Member
Join date: Feb 2005
Location: UK
Expertise:
Software:

Posts: 335

iTrader: 0 / 0%

Jonny is on a distinguished road

Add:

Code:

<br style="clear:both;"/>

After the content.

11-27-2005, 09:24 PM

sketchie

Status: Senior Member
Join date: Jul 2005
Location:
Expertise:
Software:

Posts: 835

iTrader: 1 / 100%

sketchie is on a distinguished road

Hey Jonny,
the breaks are there just to show what it looks like, they won't be there in the final version of the design, it will be content there instead so I don't know if that will work, unless I've missunderstood something?

11-27-2005, 09:47 PM

xZaft

Status: Member
Join date: Jul 2005
Location: Massachusetts, US
Expertise:
Software:

Posts: 428

iTrader: 0 / 0%

xZaft is on a distinguished road

For the margin: 0;, maybe delete that?

11-27-2005, 09:59 PM

sketchie

Status: Senior Member
Join date: Jul 2005
Location:
Expertise:
Software:

Posts: 835

iTrader: 1 / 100%

sketchie is on a distinguished road

Still doesn't work

.

Argh, I just noticed the content goes down past the navi on internet explorer :'(. Anyone know why?

11-28-2005, 09:41 AM

Zaigham

Status: Junior Member
Join date: Feb 2005
Location: On NET
Expertise:
Software:

Posts: 97

iTrader: 0 / 0%

Zaigham is on a distinguished road

add footer div with

#footer { clear:both; }

It will force the maincontainer resize itself to show footer inside it.

2nd Solution:

If you are setting up a fixed layout, then you can set margin-left property of #right to ___px value, and removing the {float:right;}.

I hope this helps. If not just reply here and I will attach working file here

regards,

Zaigham

11-28-2005, 03:36 PM

sketchie

Status: Senior Member
Join date: Jul 2005
Location:
Expertise:
Software:

Posts: 835

iTrader: 1 / 100%

sketchie is on a distinguished road

Thanks Zaigham, the first method seems to work great!

Though in internet explorer, the "top rated tuts" list is messing up but the others are fine :\.

11-29-2005, 10:41 AM

#10

Zaigham

Status: Junior Member
Join date: Feb 2005
Location: On NET
Expertise:
Software:

Posts: 97

iTrader: 0 / 0%

Zaigham is on a distinguished road

[edited] wrong recommendations,

I am exploring the fault will let you know soon.

regards,

Zaigham