div stretching - Dev Shed

Dev Shed Forums Sponsor:

June 17th, 2004, 10:20 PM

TheJim01

Coconuts migrate?

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Feb 2004

Location: http://middle.nowhere.com

Posts: 1,895

Folding Points: 70160 Folding Title: Intermediate Folder

Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176

div stretching

I know I've seen lots of questions on div sizing and positioning, but I apparently haven't been able to follow them. So I wrote out some very basic containers, and am looking for some very basic answers, even if they're only "no, it won't work."

So let's say I have a layout like this:

PHP Code:


		
			
<div style="height: 100%;

            width: 100%;

            border: 2px red dashed;

            text-align: center;">

<!-- outside div -->



  <div style="height: 200px;

              width: 300px;

              border: 2px blue solid;

              text-align: left;

              margin-left: auto;

              margin-right: auto; ">

  <!-- centered div -->



    <div style="height: 100px;

                width: 100px;

                border: 2px green dashed;

                text-align: left;

                float: left;">

    <!-- floated div 1 -->



hello world 1



    <!-- /floated div 1 -->

    </div>



    <div style="height: 100px;

                width: auto;

                border: 2px orange dashed;

                text-align: left;

                float: left;">

    <!-- floated div 2 -->



hello world 2



    <!-- /floated div 2 -->

    </div>



    <div style="font-size: 0px;

                height: 0px;

                width: 0px;

                clear: both;">

    <!-- clear div / -->

    </div>



  <!-- /centered div -->

  </div>



<!-- /outside div -->

</div>

What I want to happen is for the orange div (floated div 2) to fill the rest of the width of the surrounding blue div (centered div). I know with this simple example I can simply set the pixel width, but I want to eventually make it more dynamic, allowing for variable sizes, like if I set the blue div to be a percentage instead of a fixed width.

Any ideas? (Even links to appropriate threads are appreciated!) Thanks!

(edit: had to update "centered div" to be firefox compatible)

__________________

When in doubt, Google it!

> HTML/XHTML/CSS/PHP/MySQL/Javascript/More Tutorials @ w3schools.com <

Proud member of the T.S.N.B.U.F.L (tables should not be used for layout) alliance.

"Only use elements for their intended purpose. You wouldn't try to make coffee with a telephone, would you?" -Me

Last edited by TheJim01 : June 18th, 2004 at 12:09 AM.

June 19th, 2004, 01:46 AM

1beb

This tagline is not long enoug

Join Date: Aug 2003

Location: Toronto, ON Canada! I AM CANADIAN

Posts: 861

Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10

Two solid methods here:

1. View it --> http://www.bertelsen.ca/media/devsh...im01-part1.html

PHP Code:


		
			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>TheJim01 Devshed Post http://forums.devshed.com/t157925/s.html</title>

<style>



#red{

        height: 100%;

        width: 100%;

        border: 2px red dashed;

        text-align: center;}



#blue{    

        height: 200px;

        width: 500px;

        border: 2px blue solid;

        text-align: left;

        margin: 0px auto;      

        /** same as above 

        margin-left: auto;

        margin-right: auto;**/ }



#green{

        height: 100px;

        width: 20%;

        text-align: left;

        float: left;}



#orange{

        height: 100px;

        width: 80%;

        text-align:left;

        float:right;}



.clear{    

        font-size: 0px;

        height: 0px;

        width: 0px;

        clear: both;}            

</style>

</head>



<body>

<div id="red">

    <!-- outside div -->

    <h1><a href="http://forums.devshed.com/t157925/s.html">http://forums.devshed.com/t157925/s.html</a></h1>

    <div id="blue">

        <div id="green">hello world 1</div>

        <div id="orange">hello world 2</div>

        <div class="clear">&nbsp;</div>

    </div>

</div> 

</body>

</html>

The coding is slighty different, your main problem is that you need to choose to base one proportion off of another. The method shown above uses a 20% 80% split (adding borders messes with an exact fit, just fyi) between green and orange, respectively.

2. View it --> http://www.bertelsen.ca/media/devsh...im01-part2.html

However, another method would be to position the orange div in a manner that forces it to allow the green to be shown, and positions it properly in the container by using a left margin... shown here:

PHP Code:


		
			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>TheJim01 Devshed Post http://forums.devshed.com/t157925/s.html</title>

<style>



#red{    

        height: 100%;

        width: 100%;

        border: 2px red dashed;

        text-align: center;}

        

#blue{    

        height: 200px;

        width: 500px;

        border: 2px blue solid;

        text-align: left;

        margin: 0px auto;      

        /** same as above 

        margin-left: auto;

        margin-right: auto;**/ }

        

#green{    

        height: 100px;

        width: 100px;

        border: 1px green dashed;

        text-align: left;

        float: left;}



.orange{

        height: 100px;

        margin:0px 0px 0px 100px;

        border: 1px orange dashed;

        text-align:left;}

        

.clear{    

        font-size: 0px;

        height: 0px;

        width: 0px;

        clear: both;}          

</style>

</head>

<body>

<div id="red">

    <!-- outside div -->

    <h1><a href="http://forums.devshed.com/t157925/s.html">http://forums.devshed.com/t157925/s.html</a></h1>

    <div id="blue">

        <div id="green">hello world 1</div>

        <div class="orange">hello world 2</div>

        <div class="clear">&nbsp;</div>

    </div>

</div> 

</body>

</html>

I would suggest method #2

Note: Please do remember that IE is bugged, and that when you specify "text-align:WHATEVER;" it automagically applies that alignment to the block level element and not JUST to the inline elements as it should.

Is that what you were looking for?

__________________
The Standards!
CSS 2 - CSS 3 - w3c CSS Validator - XHTML 1.1 - HTML 4.01 - w3c (X)HTML Validator - ActionScript Reference

Links!
Bert's Door and Lock Service | Brandon Erik Bertelsen | TextPattern

Last edited by 1beb : June 22nd, 2004 at 01:09 AM.

June 21st, 2004, 02:47 PM

TheJim01

Coconuts migrate?

Join Date: Feb 2004

Location: http://middle.nowhere.com

Posts: 1,895

Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176

Yeah, I didn't really want to do the percentage split since the one column has to be the set width. (and yes, I always calculate in borders

) I had also played with using absolute positioning and 100% width, with 100px padding for the orange div.

Unfortunately, neither method quite works. The absolute positioning has too many quirks (it caused some strange rendering in both IE and FF), and your #2 method looks good in IE, but craps out in FF--the orange div extends past the blue div, and so any internal text will flow outside the blue div as well.

Who wants to start a W3C petition for a "width: fill_rest_of_unassigned_area;" style option? haha

I'm trying to do this so I can move away from tables for my site, however I'm starting to think that div's are more hassel than they're worth for this case, especially when tables have so many good alignment qualities, when you know how to use them properly...

Thanks for your sugestions, though.

Last edited by TheJim01 : June 21st, 2004 at 02:49 PM.

June 22nd, 2004, 12:44 AM

1beb

This tagline is not long enoug

Join Date: Aug 2003

Location: Toronto, ON Canada! I AM CANADIAN

Posts: 861

Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10

3. View it --> http://www.bertelsen.ca/media/devsh...im01-part3.html

This time I think I got it. Please pay attention to the class with [attributes] it's a very sheepish little hack to force IE to ignore certain style selections... works like a charm in both IE WITH, the borders, hence I got some screwy mutations on the original idea... but at least I was heading in the right direction... the hack I'm reffering to is commented in the document whose link is...

PHP Code:


		
			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>TheJim01 Devshed Post http://forums.devshed.com/t157925/s.html</title>

<style>

#red{    

        height: 100%;

        width: 100%;

        border: 2px red dashed;

        text-align: center;}



#blue{    

        height: 200px;

        width: 500px;

        border: 2px blue solid;

        text-align: left;

        margin: 0px auto;      

        /** same as above 

        margin-left: auto;

        margin-right: auto;**/ }



#green{    

        height: 100px;

        width: 100px;

        border: 1px green dashed;

        text-align: left;

        float: left;}



.orange{

        height: 100px;

        margin:0px 0px 0px 100px;

        border: 1px orange dashed;

        text-align:left;}



.orange[class]{

        /** IE Ignores Classes with [attributes], hence only Mozilla will see this :D **/

        height: 100px;

        width: 100%;

        margin:0px 0px 0px 0px;

        border: 1px orange dashed;

        text-align:left;}



.clear{    

        font-size: 0px;

        height: 0px;

        width: 0px;

        clear: both;}          

</style>

</head>

<body>

<div id="red">

    <!-- outside div -->

    <h1><a href="http://forums.devshed.com/t157925/s.html">http://forums.devshed.com/t157925/s.html</a></h1>

        <div id="blue">

            <div id="green">hello world 1</div>

            <div class="orange">hello world 2</div>

            <div class="clear">&nbsp;</div>

        </div>

</div> 

</body>

</html>

Last edited by 1beb : June 22nd, 2004 at 01:10 AM. Reason: /me flexes his css

June 22nd, 2004, 01:36 AM

TheJim01

Coconuts migrate?

Join Date: Feb 2004

Location: http://middle.nowhere.com

Posts: 1,895

Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176

Very cool. Works exactly like I wanted it to, and teh example will definately help in further development. I'll have to remember that attribute hack. Thanks a million!

June 22nd, 2004, 01:39 AM

1beb

This tagline is not long enoug

Join Date: Aug 2003

Location: Toronto, ON Canada! I AM CANADIAN

Posts: 861

Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10

Quote:

Originally Posted by TheJim01

...and teh example will definately help in further development. I'll have to remember that attribute hack. Thanks a million!

No problem TEHjim01,

haha, I do that all the time... it's a disease I swear! An innocuously spreading one at that!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: