Welcome to WebmasterWorld Guest from 54.145.69.236

Forum Moderators: not2easy

Message Too Old, No Replies

Left div doesn't stretch 100%

     
5:11 pm on Aug 11, 2007 (gmt 0)

New User

10+ Year Member

joined:Feb 11, 2007
posts:16
votes: 0


Hi,

I've got a problem with the following code:

<div style="border:thin solid #33FF33;" >

<div style="float:left; display:inline; width:7px; border:thin solid #33FF33; height:100%; display:block;"></div>
<div style="margin-left:7px; border:thin solid #9999FF;"<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

Inside the main div are two divs one containing text and one to the left of it, I want the div on the left to stretch to the height of the div containing the text, it's driving me crazy.

Any help would be much appreciated.

Thanks

5:33 pm on Aug 11, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:June 20, 2007
posts:42
votes: 0


I don't think there is a way to do that.

I usually cope with this be creating the appearance of a column by using a vertically repeating background image that spans across both columns.

5:49 pm on Aug 11, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts: 2203
votes: 34


Not sure what you're trying to achieve, but this may come close:

<div style="border:thin solid #3F3;" >

<div style="margin-left: 7px;border-left:thin solid #3F3;">
<div style="margin-left:1px; border:thin solid #99F; padding: 5px;"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>

7:59 am on Aug 12, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 1, 2005
posts:732
votes: 0



Do a search for 'faux columns'. That should help you with this problem.
2:47 pm on Aug 12, 2007 (gmt 0)

New User

10+ Year Member

joined:Feb 11, 2007
posts:16
votes: 0


Hi,

Thanks for the help got this one cracked using something similar to whar Marshall proposed. Just got a few problems in IE6 with backgrounds, hopefully will solve this soon.

Cheers

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members