HTML and CSS

div floats and width 100%

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2008

Posts: 95

Reputation: jakesee is an unknown quantity at this point

Solved Threads: 4

jakesee

Offline

Junior Poster in Training

div floats and width 100%

Jul 8th, 2008

Hi people,

I'd very much appreciate some help with my issue here....

i have

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<div id='container'>
<div id='left_pane_tab' style="float: left;" onclick='toggle(left_pane)'><img src="tab.gif" /></div>
<div id='left_pane' style="float: left; display: none"><table style="width: 200px"> ... </table></div>
<div id='content_area' style='width: 100%'></div>
</div>
<div id='container'>
<div id='left_pane_tab' style="float: left;" onclick='toggle(left_pane)'><img src="tab.gif" /></div>
<div id='left_pane' style="float: left; display: none"><table style="width: 200px"> ... </table></div>
<div id='content_area' style='width: 100%'></div>
</div>

currently, the content_area extends beyond the browser's right bounds and a horizontal scroll bar is created by the browser to scroll.

how can I make the content_area stretches and occupy just up to the edge of the browser's viewable client area? (ie, the rest of the empty space to the right. of the left_pane.)

Thanks in advance!

Last edited by peter_budo; Jul 8th, 2008 at 1:03 pm. Reason: Keep It Organized - please use [code] tags

•

Join Date: May 2008

Posts: 302

Reputation: sreein1986 is an unknown quantity at this point

Solved Threads: 33

sreein1986 sreein1986 is offline

Offline

Posting Whiz

Re: div floats and width 100%

Jul 9th, 2008

without style sheet how can i edit ...

Thanx,
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: div floats and width 100%

Jul 10th, 2008

First of all, if you want it to be 100 percent wide, don't float it. Instead, you need a style:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

.wfl {width: 100%;}

To make an interior tag full width, all tags containing it must be 100% wide, all the way up to the body tag.

Otherwise, it takes 100% of the width of its container, but does not make the container any wider.

Last edited by MidiMagic; Jul 10th, 2008 at 11:25 pm.

Daylight-saving time uses more gasoline

•

Join Date: Jul 2008

Posts: 95

Reputation: jakesee is an unknown quantity at this point

Solved Threads: 4

jakesee

Offline

Junior Poster in Training

Re: div floats and width 100%

Jul 11th, 2008

•

To make an interior tag full width, all tags containing it must be 100% wide, all the way up to the body tag.

Still doesn't work.

With the following code, the behaviour in IE7 is what I want: The content area stretches to fill the remaining area on the right. The green background correctly fills that area.

In FF, which is not working, the content area takes the entire client area and the data_table extends beyond the right edge causing a horizontal scroll bar to appear at the bottom.

How do I write it such that it works in FF as well?

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<title>Sample</title>
 
<style>
body { margin: 0px; padding: 0px; width: 100%;}
div { border: 1px solid #EEEEEE; }
table { border: 5px solid #FF0000; }
 
#container {
	 width: 100%;	
}
 
#left_pane_tab {
	float: left;
}
 
#left_pane {
	float: left;
	display: block;
	width: 300px;
	border: 5px solid #0000FF;
}
 
#content_area {
	background: #00FF00;
	width: 100%;
	height: 100%;
}
 
.data_table {
	width: 100%;	
}
 
 
</style>
 
<script>
function toggle(id)
{
	var pane = document.getElementById(id);
	if(pane.style.display == "block")
		pane.style.display = "none";
	else
		pane.style.display = "block";
}
</script>
 
</head>
 
<body>
<div id='container'>
 
<div id='left_pane_tab'>
<a href"#" onclick="toggle('left_pane'); return false;" />tab</a>
</div>
 
 
 
<div id='left_pane'>
<table>
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
<tr><td>Pear</td></tr>
<tr><td>Grape</td></tr>
</table>
</div>
 
 
<div id='content_area'>
<table class="data_table">
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
<tr><td>Pear</td></tr>
<tr><td>Grape</td></tr>
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
<tr><td>Pear</td></tr>
<tr><td>Grape</td></tr>
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
<tr><td>Pear</td></tr>
<tr><td>Grape</td></tr>
</table>
</div>
 
 
</div>
 
</body>
</html>
<html>
<head>
<title>Sample</title>

<style>
body { margin: 0px; padding: 0px; width: 100%;}
div { border: 1px solid #EEEEEE; }
table { border: 5px solid #FF0000; }

#container {
	 width: 100%;	
}

#left_pane_tab {
	float: left;
}

#left_pane {
	float: left;
	display: block;
	width: 300px;
	border: 5px solid #0000FF;
}

#content_area {
	background: #00FF00;
	width: 100%;
	height: 100%;
}

.data_table {
	width: 100%;	
}
	

</style>

<script>
function toggle(id)
{
	var pane = document.getElementById(id);
	if(pane.style.display == "block")
		pane.style.display = "none";
	else
		pane.style.display = "block";
}
</script>

</head>

<body>
<div id='container'>

<div id='left_pane_tab'>
<a href"#" onclick="toggle('left_pane'); return false;" />tab</a>
</div>



<div id='left_pane'>
<table>
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
<tr><td>Pear</td></tr>
<tr><td>Grape</td></tr>
</table>
</div>


<div id='content_area'>
<table class="data_table">
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
<tr><td>Pear</td></tr>
<tr><td>Grape</td></tr>
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
<tr><td>Pear</td></tr>
<tr><td>Grape</td></tr>
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
<tr><td>Pear</td></tr>
<tr><td>Grape</td></tr>
</table>
</div>


</div>

</body>
</html>

Last edited by jakesee; Jul 11th, 2008 at 5:07 am.

•

Join Date: Mar 2008

Posts: 315

Reputation: Thirusha is an unknown quantity at this point

Solved Threads: 50

Thirusha

Offline

Posting Whiz

Re: div floats and width 100%

Jul 11th, 2008

can u provide the screen shot of how it is looking in ie7, i just cant understand what u want it to look like, i think the cold here in SA has frozen my brain.

•

Join Date: Jul 2008

Posts: 95

Reputation: jakesee is an unknown quantity at this point

Solved Threads: 4

jakesee

Offline

Junior Poster in Training

Re: div floats and width 100%

Jul 11th, 2008

•

Originally Posted by Thirusha

can u provide the screen shot of how it is looking in ie7, i just cant understand what u want it to look like, i think the cold here in SA has frozen my brain.

Click image for larger version

Name: left pane collapse.jpg
Views: 7
Size: 9.2 KB
ID: 6582

Click image for larger version

Name: left pane expand.jpg
Views: 8
Size: 10.9 KB
ID: 6583

•

Join Date: Jul 2008

Posts: 95

Reputation: jakesee is an unknown quantity at this point

Solved Threads: 4

jakesee

Offline

Junior Poster in Training

Re: div floats and width 100%

Jul 11th, 2008

In case you also need FF screenshots, here it is:

Click image for larger version

Name: ffnoscroll.jpg
Views: 5
Size: 10.8 KB
ID: 6584

Click image for larger version

Name: ffscroll.jpg
Views: 4
Size: 11.8 KB
ID: 6585

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: div floats and width 100%

Jul 12th, 2008

It looks like your script is turning some styles on and off. The others might or might not be switched on and off.

Also, you have surrounding styles (margin, border, padding) and size styles (height, width) assigned to the same tag. This causes incompatibilities between IE and FF.

Height of 100% can cause unpredictable results. It isn't really defined for anything except an object inside another container with a defined height.

Daylight-saving time uses more gasoline

•

Join Date: Jul 2008

Posts: 95

Reputation: jakesee is an unknown quantity at this point

Solved Threads: 4

jakesee

Offline

Junior Poster in Training

Re: div floats and width 100%

Jul 12th, 2008

•

Originally Posted by MidiMagic

Height of 100% can cause unpredictable results. It isn't really defined for anything except an object inside another container with a defined height.

ok.. then how shoud it be done properly ?

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: div floats and width 100%

#10

Jul 14th, 2008

What are you TRYING to do. It is not clear.

Height is not normally intended to be defined. The entire idea of a web page is to fit the width of the current browser window, and then expand downward as needed until all of the content can be rendered.

The one thing you can NOT do is make a page that exactly fills the browser window. Too many people are pulling their hair out trying to do this. But as long as computers and monitors exist with different screen resolutions, and as long as people can resize their browser windows, and add toolbars to browsers, you are not going to exactly fit your page on one screen.

So you compromise. You let your text expand downward, to flow around your other objects. You use percentage widths or floats to place things. You leave enough whitespace between objects, so the extra space can shrink if a smaller browser window is used. And you don't get mad if your page needs to be scrolled to be read.

Last edited by MidiMagic; Jul 14th, 2008 at 5:54 pm.

Daylight-saving time uses more gasoline