Solved

make child div 100% width of parent

Posted on 2009-07-14
10
447 Views
Last Modified: 2012-05-07
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
Comment
Question by:vbnewbie01
  • 5
  • 5
10 Comments
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24854575
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
 
LVL 1

Author Comment

by:vbnewbie01
ID: 24854685
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
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24854799
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
 
LVL 1

Author Comment

by:vbnewbie01
ID: 24855034
hi, ryangiglio; unfortunately, exact same result.  if you can screencap it working, would love to see.

thanks.
0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 24855038
btw my doctype is strict ...
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Accepted Solution

by:
ryangiglio earned 250 total points
ID: 24856044
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
 
LVL 1

Author Comment

by:vbnewbie01
ID: 24861852
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
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24861938
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
 
LVL 1

Author Comment

by:vbnewbie01
ID: 24862422
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
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24862489
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now