[SOLVED] Problem with Width: 100%

[Bongeh]

Hi guys,

 

<div id="headshell">

<div id="head">


	<div id="logo">
		<div id="logo2">
			<img src="logo.jpg" alt="">
		</div>

		<div id="date" style="text-align:center">
			Date script
		</div>
	</div>

	<div id="bancon">

		<div style="float:right">
		Nav Nav Nav Nav Nav Nav
		</div>
	</div>

</div>
</div>

</body>
</html>

 

body		{
	margin: 0;
	padding: 0;
	}

#head
	{
	float:left;
	width: 100%;
	border-top: solid 1px #99adc2;
	background-color:red;
	min-width: 860px;
	}


#logo		{
	float:left;
	border-top: solid 1px #99adc2;
	border-left: solid 1px #99adc2;
	border-right: solid 1px #99adc2;
	margin-left: 5px;
	margin-top: 5px;
	padding: 0px 0px 0px 0px;
	}


#logo2		{
	height: 101px;
	width: 213px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

#date		{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-top: solid 1px #99adc2;
	border-bottom: solid 1px #99adc2;
	text-align: center;
	}

#bancon		{
	margin-top: 5px;
	margin-left: 1px;
	float:left;
	height: 122px;
	border: solid 1px #99adc2;
	background-image: url('banner.jpg');
	background-repeat: no-repeat;
	background-color: #1a2558;;
	}

 

Basically, I'm trying to create a banner for the top of a site, that spans to the edge of the page with any resolution browser.

 

I can make it so that i almost have what i want, but once i add width:100% to #bancon to make the box with the nav text in it reach the edges, the div drops below the logo breaking the banner.

 

Perhaps im using the wrong css, is there another way to tell a div to use all available space on the width, but without breaking my design?

 

Thanks in advance.

 

 

 

[dropfaith]

why would you float bancon left if its 100% width?

[haku]

Can you try to explain what it is you are trying to do a little more? I didn't really get it.

[Bongeh]

Sorry if I was brief, I wish to have a banner at the top of my site, with a logo fixed in the top left (with the date underneath). To the right of the logo and date is where I want a div that stretches to the edge of the page (right), regardless of resolution (with my nav on that bar).

 

It nearly works, except when I add the width 100% to the bar that needs it, it bumps it down below the logo.

 

dropfaith, i tryed to float it so it would stick to div to the left of it.

 

Does that help anyone understand what im trying to acheive?

[haku]

Give the logo a fixed width, and put it inside of the div that you want it to be 'beside'. Then float it left. Give the div that it is inside a width of 100%, and a left padding that is the same amount as the width of the logo.

[Bongeh]

Thank you so much man,

 

It's so silly really when you look at it now I was over complicating things.

 

Cheers again.