div does not inherit correct width

Question

kevosull 0 Newbie Poster

17 Years Ago

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:

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

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.

<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

html-css web-design

5 Contributors
4 Replies
361 Views
1 Week Discussion Span
Latest Post 17 Years Ago Latest Post by FeralReason

Dani AI

Generated 9 Months Ago

Quick diagnosis and concise fixes (credits to , , and for spotting pieces of this).

The visible misalignment is most likely caused by a floated parent that is using "shrink‑to‑fit" behavior plus the classic box‑model math: .sub_content was floated (no explicit width) so browsers shrink it to fit children; the two children use percent widths that effectively add to 100% while the parent also has padding/borders, so Firefox/Opera force overflow while Safari was more forgiving. Also fix the small syntax errors noted: hex colors need a leading # and min-width needs units (for example 300px).

Practical steps, in order:

Fix syntax: add # to color hexes and specify px for min-width.
Stop floating the container. Make .sub_content span the available width (or give it width:100% and include padding in its width via box-sizing). This prevents shrink‑to‑fit. (This implements @Magicianer and @FeralReason suggestions.)
Contain inner floats: add a clearfix or use overflow:auto on the parent so the border expands to wrap floated children (as @FeralReason suggested).
Or switch to a modern layout (Flexbox) so you avoid float math entirely.

Small, copy‑paste fixes you can try immediately:

/* safer box model + clearfix */
*,
*::before,
*::after { box-sizing: border-box; }

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Or, modern alternative (replace float layout):

.sub_content { display: flex; align-items: flex-start; }
.book_details { flex: 0 0 35%; }
.trace_details { flex: 1 1 65%; min-width: 300px; }

Finally, confirm you have a standards DOCTYPE, then use your browser DevTools to inspect computed widths and padding/border. That will quickly show which element is shrink-to-fit or overflowing.

All 4 Replies

macneato 29 Posting Pro in Training

17 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Magicianer 0 Newbie Poster · Answer 1 · 2009-07-04T00:45:50+00:00

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

MidiMagic 579 Nearly a Senior Poster · Answer 2 · 2009-07-08T11:29:31+00:00

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%.

FeralReason 0 Light Poster · Answer 3 · 2009-07-08T20:52:46+00:00

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.

<!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>

div does not inherit correct width

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers