Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 4023

Jun 30th, 2009

div does not inherit correct width

Expand Post »

I have some nested divs which user percentages for sizing the width. The divs are floated for positioning which works fine. The problem is that one of the divs (sub-content) which contains two floated divs sized at 35% and 65% does not occupy the same width as the divs above and below it, resulting in the border being out of line with everything else. this is what it looks like in firefox:

http://www.tracethisbook.com/images/firefox.tiff

and here's what it should look like, as displayed in safari

http://www.tracethisbook.com/images/safari.tiff

The relevant code is below. I've included a few small bits of inline styling as well as relevant CSS so I didn't have to include all of the CSS files.

html Syntax (Toggle Plain Text)
<div class="content">
	<div class="content_header"><h2 class="header_text">View Traces</h2></div>
	<div class="nav">
	       <!-- nav bar stuff -->
	</div>
        <div class="internal_content">
	     <div class="sub_header rounded_top"><h2 class="sub_header_text">Details for Trace</h2></div>
		<div class="sub_content">
			<div class="book_details">
<div style="float:left"><img class="book_cover" src="" /></div>
				<div style="float:left" class="trace_details">
					<table class="info">
						<!-- table displaying book details -->
					</table>
				</div>
			</div>
                        <div id="trace_details">
				<table class="list">
                                    <!-- table shown more info -->
                                </table>
                        </div>
                </div>
	<div class="sub_footer rounded_base"></div>
</div>
 
.content{
	border-style:solid;
	border-width:1px;
	border-color:022c82;
	margin-left:1%;
	margin-bottom:10px;
	padding-bottom:10px;
	background-color:white;
}
.internal_content{
	width:98%;
	padding:10px;
}
.sub_header{
	width:100%;
	background-image:url(/images/sub_header.gif);
	height:30px;
}
.sub_footer{
        width:100%;
	background-image:url(/images/sub_header.gif);
	height:30px; 
       clear:both;
}
.sub_content{
	border-style:none solid none solid;
	border-width:1px;
	border-color:bebeff;
	padding:5px;
	height:auto;
        float:right;
}
.book_details{
	width:35%;
        float:left;
        clear:left;
}
.trace_details{
	width:65%;
	min-width:300;
}
<div class="content">
	<div class="content_header"><h2 class="header_text">View Traces</h2></div>
	<div class="nav">
	       <!-- nav bar stuff -->
	</div>
        <div class="internal_content">
	     <div class="sub_header rounded_top"><h2 class="sub_header_text">Details for Trace</h2></div>
		<div class="sub_content">
			<div class="book_details">
<div style="float:left"><img class="book_cover" src="" /></div>
				<div style="float:left" class="trace_details">
					<table class="info">
						<!-- table displaying book details -->
					</table>
				</div>
			</div>
                        <div id="trace_details">
				<table class="list">
                                    <!-- table shown more info -->
                                </table>
                        </div>
                </div>
	<div class="sub_footer rounded_base"></div>
</div>

.content{
	border-style:solid;
	border-width:1px;
	border-color:022c82;
	margin-left:1%;
	margin-bottom:10px;
	padding-bottom:10px;
	background-color:white;
}
.internal_content{
	width:98%;
	padding:10px;
}
.sub_header{
	width:100%;
	background-image:url(/images/sub_header.gif);
	height:30px;
}
.sub_footer{
        width:100%;
	background-image:url(/images/sub_header.gif);
	height:30px; 
       clear:both;
}
.sub_content{
	border-style:none solid none solid;
	border-width:1px;
	border-color:bebeff;
	padding:5px;
	height:auto;
        float:right;
}
.book_details{
	width:35%;
        float:left;
        clear:left;
}
.trace_details{
	width:65%;
	min-width:300;
}

I think I've including everything above. Does anyone have any idea why this renders fine in Safari, but not in Firefox. Also, in Opera, the trace_details and book_details divs render with their smallest possible widths and the border on the sub_content div is even further out of line. Any help would be greatly appreciated.
Thanks,
Kev

Similar Threads

MySpace DIV Help Needed!! in HTML and CSS
Div width and list margin problem in HTML and CSS
div floats and width 100% in HTML and CSS
Child div's (faux columns) showing irregularly in FF in HTML and CSS
Table width in HTML and CSS

kevosull

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Jun 2009

Permalink

Jul 2nd, 2009

Re: div does not inherit correct width

First things first. You dont have "#" before your colours. Secondly, the tracy_details class, min-width, does not have a unit. To be totally honest i can't see what is going on, i would help you, if you get setup some bg colours and some content holders just to make it a little clearer.

macneato

Reputation Points: 46

Solved Threads: 48

Posting Pro in Training

Offline

410 posts
since Jun 2007

Permalink

Jul 3rd, 2009

Re: div does not inherit correct width

Remove padding from .internal_content and add padding-left:10px to .sub_header

Magicianer

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

12 posts
since Jul 2009

Permalink

Jul 8th, 2009

Re: div does not inherit correct width

You forgot that margins, borders, and padding are added OUTSIDE the width and height styles. This makes the inner objects too big to fit in your container if the width percentages add to 100%.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jul 8th, 2009

Re: div does not inherit correct width

1) Remove the "float:right" from the sub_content div to get it to fill the width of the internal_content div.
2) Add a "float:right" to the trace_details list to get this to position properly (which you have as an ID and should change to a class as previously mentioned.) I'm assuming this is the div containing the "location, reader, rating, etc." content.
3) When I do this, I still see that the divs contained by the sub_content div flow outside of aub_content boundaries (not sure if you see this with the content present and whatever DOCTYPE you are using.) Adding an "overflow:auto" to the sub_content div keeps these contained divs from flowing outside of the box.

Here is modified code. Took out the images and substituted background colors & labeled the divs so that the whole thing is easier to see.

Let me know if this helps.

HTML and CSS Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<!-- http://www.daniweb.com/forums/thread200673.html -->
 
<HEAD>
<STYLE type="text/css">
 
.content{
	border-style:solid;
	border-width:1px;
	border-color:022c82;
	margin-left:1%;
	margin-bottom:10px;
	padding-bottom:10px;
	background-color:white;
}
.internal_content{
	width:98%;
	padding:10px;
	background-color:yellow;
}
.sub_header{
	width:100%;
	background-color:red;
	/* background-image:url(/images/sub_header.gif); */
	height:30px;
}
.sub_footer{
    width:100%;
	background-color:blue;
	/* background-image:url(/images/sub_header.gif); */
	height:30px; 
    clear:both;
}
.sub_content{
	border-style:none solid none solid;
	border-width:1px;
	border-color:bebeff;
	background-color:green;
	padding:5px;
	height:auto;
	overflow:auto;
}
.book_details{
	width:35%;
    float:left;
    clear:left;
	background-color:gray;
}
.trace_details{
	width:65%;
	min-width:300;
	background-color:orange;
	float:right;
}
 
</style>
</HEAD>
<BODY>
<div class="content">
	<div class="content_header"><h2 class="header_text">content_header</h2></div>
	<div class="nav">nav
	       <!-- nav bar stuff -->
	</div>
        <div class="internal_content">internal_content
	     <div class="sub_header rounded_top"><h2 class="sub_header_text">sub_header_text</h2></div>
		<div class="sub_content">sub_content
			<div class="book_details">book_details
<div style="float:left"><img class="book_cover" src="" />book_cover</div>
				<div style="float:left" class="trace_details">class trace_details
					<table class="info">info
						<!-- table displaying book details -->
					</table>
				</div>
			</div>
                        <div class="trace_details">id trace_details <!-- was an id instead of a class -->
				<table class="list">list
                                    <!-- table shown more info -->
                                </table>
                        </div>
                </div>
	<div class="sub_footer rounded_base">sub_footer rounded_base</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<!-- http://www.daniweb.com/forums/thread200673.html -->

<HEAD>
<STYLE type="text/css">

.content{
	border-style:solid;
	border-width:1px;
	border-color:022c82;
	margin-left:1%;
	margin-bottom:10px;
	padding-bottom:10px;
	background-color:white;
}
.internal_content{
	width:98%;
	padding:10px;
	background-color:yellow;
}
.sub_header{
	width:100%;
	background-color:red;
	/* background-image:url(/images/sub_header.gif); */
	height:30px;
}
.sub_footer{
    width:100%;
	background-color:blue;
	/* background-image:url(/images/sub_header.gif); */
	height:30px; 
    clear:both;
}
.sub_content{
	border-style:none solid none solid;
	border-width:1px;
	border-color:bebeff;
	background-color:green;
	padding:5px;
	height:auto;
	overflow:auto;
}
.book_details{
	width:35%;
    float:left;
    clear:left;
	background-color:gray;
}
.trace_details{
	width:65%;
	min-width:300;
	background-color:orange;
	float:right;
}

</style>
</HEAD>
<BODY>
<div class="content">
	<div class="content_header"><h2 class="header_text">content_header</h2></div>
	<div class="nav">nav
	       <!-- nav bar stuff -->
	</div>
        <div class="internal_content">internal_content
	     <div class="sub_header rounded_top"><h2 class="sub_header_text">sub_header_text</h2></div>
		<div class="sub_content">sub_content
			<div class="book_details">book_details
<div style="float:left"><img class="book_cover" src="" />book_cover</div>
				<div style="float:left" class="trace_details">class trace_details
					<table class="info">info
						<!-- table displaying book details -->
					</table>
				</div>
			</div>
                        <div class="trace_details">id trace_details <!-- was an id instead of a class -->
				<table class="list">list
                                    <!-- table shown more info -->
                                </table>
                        </div>
                </div>
	<div class="sub_footer rounded_base">sub_footer rounded_base</div>
</div>
</body>
</html>

FeralReason

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

32 posts
since May 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Centering left-aligned text using CSS

Next Thread in HTML and CSS Forum Timeline: How to do an if statement based on url?

DaniWeb Message

Cancel Changes

User Name
Password