Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Layout Problems - help please

Status
Not open for further replies.
Seminara

Seminara

Technical User
Jun 9, 2005
36
GB
Hi all

How can you command a div to expand vertically 100% and have it recognized in both IE and Firefox? I’ve tried it here:

- left column not expanding

and here:

- right column not expanding

Any ideas?

Also (sorry) why (in Firefox) is the width of this page effected by the presence of a scroll bar?...



Any and all help appreciated!
 
Sort by date Sort by votes
Yep .. just dies for me too. not from your internal webserver address or somthing?

Rob
 
Upvote 0 Downvote
Yes probably - I'll try to sort it out. Thanks
 
Upvote 0 Downvote
maybe this:
html,body {height:100%;margin:0;padding:0;}
div {height:100%;}
 
Upvote 0 Downvote
Sorry - I've been told the '-' in the address is for internal use only so please try these link:

--

Hi all

How can you command a div to expand vertically 100% and have it recognized in both IE and Firefox? I’ve tried it here:

- left column not expanding

and here:

- right column not expanding

Any ideas?

Also (sorry) why (in Firefox) is the width of this page effected by the presence of a scroll bar?...



Any and all help appreciated!

--

If these links don't work either I'll have to FTP it to my personnal server tonight. Cheers!
 
Upvote 0 Downvote
Regarding the scroll bar in FF - You will notice that FF does not display any scroll bar when it is not required. When you browse to a page which does require a scroll bar the overall window stays the same size but the viewing area reduces in width to allow for it. This behaviour is by design.

In IE the scrollbar is always there, but it only becomes active if required.
 
Upvote 0 Downvote
Cant help you on any issues i'm affriad ... compliments to the chef for the site deisgn though ... very nice.

Rob
 
Upvote 0 Downvote
@TamedTech, thanks. :)

@FoamCow, I'm probably being thick here but I don't 'think' that article can help me. My columns aren't fixed, they float so I can't use a bkgd gif in 'background'.

I have applied that to the div which both the left and right columns are sitting in ('menu2'). That 'should' work but it doesn't seem to??
 
Upvote 0 Downvote
Can you elaborate what you mean when you say:

My columns aren't fixed, they float
Click to expand...


As far as I can tell you have a fixed width layout that is horizontally centered in browser. This means that if you put your columns inside a "wrapper" and applied the faux background image to that wrapper it will give the impression that the columns are of equal size regardless of which is longer.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
Hmm, OK, I had a feeling I'd get something wrong (I'm new to CSS). It's probably easiest if I show you the code?

CSS code for 'menu2':

div.menus2 { width: 580px; margin: 0; background-image: url(../images/background_wide.gif); background-repeat: repeat-y; 0 0 }

--

Code for the wrapped section of the page:

<div class="menus2">




<div class="leftcolumnwide">

<div class="menu_bodyleftshad"></div>

<div class="thumb_side"><img src="index/images/conf_rm2.jpg" alt="" name="meeting1" width="159" height="159" border="0" id="meeting1" /></div>

<div class="divider"><img src="index/images/divider.gif" alt="" /></div>

<div class="thumb_side2"><span class="H3effects5">View Photos: </span></div>

<div class="thumb_side2"><img src="index/images/pages.gif" alt="" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="10,-3,18,7" href="javascript:;" alt="Coference room 1" onmouseover="MM_swapImage('meeting1','','index/images/conf_rm.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="40,-3,30,7" href="javascript:;" alt="Coference room 2" onmouseover="MM_swapImage('meeting1','','index/images/conf_rm.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="50,3,55,9" href="javascript:;" alt="Coference room 3" onmouseover="MM_swapImage('meeting1','','index/images/conf_rm.jpg',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>

<div class="divider"><img src="index/images/divider.gif" alt="" /></div>

<div class="thumb_side2"><span class="H3effects5">View Virtual Tour: </span></div>

<div class="thumb_side2"><a href="#" target="_self"><img src="index/images/QTVR.gif" alt="Click to view tour" width="120" height="81" border="0" /></a></div>

<div class="divider"><img src="index/images/divider.gif" alt="" /></div>


</div>


<div id="bodyrightshell">

<div class="menu_shadyelwide2">

</div>
<div class="bodyright2">

<div class="results_case2">
<p class="resultstitle2">Message sent</p>
</div>
<div class="thumb_side3"><img src="index/images/hotel_image.jpg" alt="" name="house" width="154" height="85" border="0" id="house" /></div>

</div>

<div class="bodyright3">
<div class="thumb_side3b"><img src="index/images/emailsent.gif" alt="" name="emailsent" width="51" height="50" border="0" id="emailsent" /></div>
</div>

<div class="bodyright3">

<div class="results_case3b"><span class="resultstitle">Your request has been received. </span></div>
<div class="results_case4">
<p>Thank you for choosing Marston Hotels as your conference space provider.</p>
</div>
</div>




<div class="bodyright4">
<div class="results_case4"></div>

</div>

</div>

--

Isn't this acting as the wrapper you mention?

 
Upvote 0 Downvote
I'm not going to try and work out what's going on in your code, it's quicker for me to show you this instead.


Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">

<head>
<title>Untitled page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<style type="text/css">
		* {
			margin:0;
			padding:0;
			}

		body {
			padding:20px;
			text-align:center;
			
		}

		#wrapper {
			background-color:#ccc;
			width:750px;
			margin:0 auto;
			text-align:left;
		}

		#left {
			background-color:red;
			float:left;
			width:200px;
		}

		#content {
			background-color:blue;
			float:left;
			width:550px;
		}

		#footer {
			height:30px;
			clear:both;
			background-color:green;
		}
	</style>
</head>

<body>
<div id="wrapper">

	<div id="left">
		<p>Left</p>
		<p>Left</p>
		<p>Left</p>
		<p>Left</p>
		<p>Left</p>
		<p>Left</p>
		<p>Left</p>
	</div>

	<div id="content">
		 Content
	</div>

	 <div id="footer">
	  Footer
	 </div>
</div> <!-- End Wrapper -->
</body>
</html>


Now, if you take that crude example, you would apply your background graphic to the "wrapper" div and set it to repeat vertically.
Therefore, no matter which of your columns is longer the background will always appear behind them and extend to the footer.
(obviously, take the red and blue bits out and make the actual columns transparent!)

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
Hi Foamcow,

Many thanks for this. I was attempting to use the same solution but using a sort of sub wrapper (one which only encased the left and right columns). That didn't work so I've followed your suggestion and placed it in the main wrapper. I had to tweek the background colors of the divs above and below the columns as I didn't want the tile to show through but that's OK...it works now!


Thanks again,
Anthony
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
137
tyutghf
tyutghf
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
107
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
99
Carlvic
Carlvic
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
135
Katerine
Katerine
rastaIT34
  • Locked
  • Question
CSS help in WordPress
Replies
3
Views
104
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top