Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 480
  • Last Modified:

make child div 100% width of parent

hi there; a little backstory first: i need to display 2 dynamically generated divs horizontally.  now because it is impossible to know the widths of these divs before they are rendered, i am unable to simply float them (which is why i have made them inline).

my first question; is this an acceptable method to acheive the intened result.  seems to work.

second, and more importantly, i would like the header height div to be 34px and stretch the entire width of the parent div.  

without a height, the header div stretches as intended.  however, as soon as a height is applied, the header div ends at whatever width the header text is (see attached image where red div (css_heading) has height applied and div below that (css_subheading) has no height applied and displays perfect).

*** this is only an issue in explorer ... not firefox

my question is, why is this and what can be done to resolve the issue?

thanks all.
.css_container
{
    border:solid 1px #dcdcdc;
    font-family: arial, verdana;
    font-size:13px;
}
 
 
 
.css_container .css_heading
{   
    background-color:red; 
    font-size:17px;
    height:34px;
}
 
 
.css_container .css_subheading
{   
    background-color:#eaeaea;
    font-weight:bold;
}
 
 
.css_container .css_content
{   
    padding:5px;
}

Open in new window

width-v01.jpg
0
vbnewbie01
Asked:
vbnewbie01
  • 5
  • 5
1 Solution
 
ryangiglioCommented:
I can't be sure without seeing the HTML of the page, but try making the divs display:block instead of display:inline. Or is that impossible because of the way the page is set up?
0
 
vbnewbie01Author Commented:
sorry, meant to include that (see below) ...

i had origianlly tried block in the css_heading div and no luck.

thanks.
<div style="float:left; display:inline; margin-right:20px;">
                <div class="css_container">
                    <div class="css_heading"> This is a heading This is a heading This is a heading This</div>
                    <div class="css_subheading"> This is a heading</div>
                    <div class="css_content"> This is a whole bunch of content in the content area This is a whole bunch of content in the content area</div>
                </div>
            </div>

Open in new window

0
 
ryangiglioCommented:
This is an odd solution, but it occured to me that header tags (<h1>, <h2>, etc) always span the entire width of an area...so...


.css_container .css_heading
{   
    background-color:red; 
	width:100%;
}
 
.css_heading h2
{
	background-color:red;
    height:34px;
	margin:0px;
	display:inline;
 
}
 
<div style="float:left;">
	<div class="css_container">
		<div class="css_heading">
			<h2>This is a heading This is a heading This is a heading This</h2>
		</div>
		<div class="css_subheading"> This is a heading</div>
		<div class="css_content"> This is a whole bunch of content in the content area This is a whole bunch of content in the content area</div>
	</div>
</div>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
vbnewbie01Author Commented:
hi, ryangiglio; unfortunately, exact same result.  if you can screencap it working, would love to see.

thanks.
0
 
vbnewbie01Author Commented:
btw my doctype is strict ...
0
 
ryangiglioCommented:
Sure.

this is the HTML I'm looking at.

Attached are IE8 and IE7 screenshots.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css"> 
 
.css_container
{
    border:solid 1px #dcdcdc;
    font-family: arial, verdana;
    font-size:13px;
}
 
.css_container .css_heading
{   
    background-color:red; 
        width:100%;
}
 
.css_heading h2
{
        background-color:red;
    height:34px;
        margin:0px;
        display:inline;
 
}
 
.css_container .css_subheading
{   
    background-color:#eaeaea;
    font-weight:bold;
}
 
 
.css_container .css_content
{   
    padding:5px;
}
 
</style>
</head>
 
<body>
<div style="float:left;">
        <div class="css_container">
                <div class="css_heading">
                        <h2>This is a heading This is a heading This is a heading This</h2>
                </div>
                <div class="css_subheading"> This is a heading</div>
                <div class="css_content"> This is a whole bunch of content in the content area This is a whole bunch of content in the content area</div>
        </div>
</div>
</body>
</html>

Open in new window

IE7.png
IE8.png
0
 
vbnewbie01Author Commented:
hi, ryangiglio; thanks for those however, i have copy and pasted your exact code into a fresh page in not one but two of my computers and i still get the exact same result (see attached).  also tested in ie8 which renders like ie7.

i also tried going to the getdropbox.com url but i guess you've removed it?

thanks.
width-v02.jpg
0
 
ryangiglioCommented:
http://files.getdropbox.com/u/1264486/test3.html

It's still up and public.

I tested it on my Work PC in IE8 and IE7 Compatibility and it looks like the two screenshots I posted.

Strange.
0
 
vbnewbie01Author Commented:
the issue, i discovered, is in it's compatability mode.  when i run in ie7 i get my 'broken' display ... when i run in ie8 i get your 'working' solution.

not sure how you got your ie7.png image working but it certainly doesn't for me.

unfortunately, i need a ie6/ie7 solution at this point )=

thanks again.
0
 
ryangiglioCommented:
Ah, I'm sorry about that.

Unfortunately I don't have a machine running genuine IE7 (all Macs at home) so I can't be of any more help.

I hope someone else finds you a solution.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now