Problem with 2 Column layout
06-17-2009, 12:00 AM
|
Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
HTML code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Lava Restaurant Bar & Brick Oven</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
}
.style1 {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
-->
</style></head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/layout1wslices_03.gif" width="265" height="297" /><img src="images/layout1wslices_04.gif" width="716" height="297" />
<div id="header_contact"><span class="style1">Lava Restaurant<br />
Bar and Brick Oven<br />
344 French Hill Rd.<br />
Wayne, NJ 07470<br />
(973) 696-9440<br />
(973) 696-2048<br />
<a href="lava344@gmail.com">lava344@gmail.com</a></span> </div>
</div>
<div id="nav_bar"><img src="images/layout1wslices_07.gif" width="241" height="29" /><img src="images/layout1wslices_17.gif" width="241" height="12" /><img src="images/layout1wslices_10.gif" width="241" height="28" /><img src="images/layout1wslices_17.gif" width="241" height="12" /><img src="images/layout1wslices_12.gif" width="241" height="28" /><img src="images/layout1wslices_17.gif" width="241" height="12" /><img src="images/layout1wslices_14.gif" width="241" height="28" /><img src="images/layout1wslices_17.gif" width="241" height="12" /><img src="images/layout1wslices_16.gif" width="241" height="28" /><img src="images/layout1wslices_17.gif" width="241" height="12" /><img src="images/layout1wslices_18.gif" width="241" height="28" /><img src="images/layout1wslices_21.gif" width="241" height="12" /><img src="images/layout1wslices_22.gif" width="241" height="42" /><img src="images/layout1wslices_23.gif" width="241" height="324" /></div>
<div id="content_area"></div>
<div id="footer">
<img src="images/layout1wslices_24.gif" width="981" height="69" /> </div>
</div>
</body>
</html>
CSS code
Code:
#wrapper{
margin-right: auto;
margin-left: auto;
height: auto;
width: 982px;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
}
#header{
margin: 0px;
padding: 0px;
height: 297px;
width: 982px;
position: static;
}
#header_contact{
position: relative;
height: auto;
width: auto;
text-align: right;
top: -297px;
float: right;
right: 40px;
}
#nav_bar{
float: left;
width: 241px;
top: 0px;
padding: 0px;
margin: 0px;
height: auto;
}
#content_area{
background-image: url(images/layout1wslices_08.gif);
width: 741px;
float: right;
height: auto;
}
#footer{
width: 981px;
height: auto;
clear: both;
}
#photogallery{
height: 466px;
width: 622px;
text-align: center;
}
#homepage_text{
}
I can't figure out why this white space is ocurring in my layout. I've literally tried a whole bunch of different combinations of CSS coding to get that to fix and it's just not happening. Can anyone shed some light on this issue? I feel like it's got to be a pretty simple answer but I just can't figure it out and it's boggling my mind. Any help would be greatly appreciated. |
|
|
|
|
06-17-2009, 04:37 PM
|
Re: Problem with 2 Column layout
|
Posts: 8,823
Location: Tennessee
|
It looks to me like you're still trying to lay this out as if it were tables, based on the way you've got your images chopped up.
Have you got this on-line anywhere so that we can see it with YOUR images?
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
06-17-2009, 05:44 PM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
http://www.lavabarrestaurant.com/test/index.html
that's where i'm testing it out online.
I realized the reason for the space occuring was due to the #header_contact div...I basically deleted it and now that space went away although there's still a tiny white space right before the footer. Is this setup appropriately for a 2 column layout though? I've always designed sites with a horizontal navigation and now that I'm trying a vertical navigation I'm running into these issues. The photo gallery is also not budging from that spot too even though I placed relative positioning on it (took it off for now). Here's the code now:
HTML Code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Lava Restaurant Bar & Brick Oven</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
}
.style1 {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
-->
</style></head>
<body>
<div id="wrapper">
<div id="header">
<img src="http://www.webmaster-talk.com/images/layout1wslices_03.gif" width="265" height="297" /><img src="http://www.webmaster-talk.com/images/layout1wslices_04.gif" width="716" height="297" /></div>
<div id="nav_bar"><img src="http://www.webmaster-talk.com/images/layout1wslices_07.gif" width="241" height="29" /><img src="http://www.webmaster-talk.com/images/layout1wslices_17.gif" width="241" height="12" /><img src="http://www.webmaster-talk.com/images/layout1wslices_10.gif" width="241" height="28" /><img src="http://www.webmaster-talk.com/images/layout1wslices_17.gif" width="241" height="12" /><img src="http://www.webmaster-talk.com/images/layout1wslices_12.gif" width="241" height="28" /><img src="http://www.webmaster-talk.com/images/layout1wslices_17.gif" width="241" height="12" /><img src="http://www.webmaster-talk.com/images/layout1wslices_14.gif" width="241" height="28" /><img src="http://www.webmaster-talk.com/images/layout1wslices_17.gif" width="241" height="12" /><img src="http://www.webmaster-talk.com/images/layout1wslices_16.gif" width="241" height="28" /><img src="http://www.webmaster-talk.com/images/layout1wslices_17.gif" width="241" height="12" /><img src="http://www.webmaster-talk.com/images/layout1wslices_18.gif" width="241" height="28" /><img src="http://www.webmaster-talk.com/images/layout1wslices_21.gif" width="241" height="12" /><img src="http://www.webmaster-talk.com/images/layout1wslices_22.gif" width="241" height="42" /><img src="http://www.webmaster-talk.com/images/layout1wslices_23.gif" width="241" height="324" /></div>
<div id="content_area">
<div id="photo_gallery">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="622" height="466">
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<embed src="slideshow.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="622" height="466"></embed>
</object>
</div>
</div>
<div id="footer">
<img src="http://www.webmaster-talk.com/images/layout1wslices_24.gif" width="981" height="69" /> </div>
</div>
</body>
</html>
CSS Code
Code:
#wrapper{
margin-right: auto;
margin-left: auto;
height: auto;
width: 982px;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
}
#header{
margin: 0px;
padding: 0px;
height: 297px;
width: 982px;
position: static;
}
#header_contact{
position: relative;
height: auto;
width: auto;
text-align: right;
top: -297px;
float: right;
right: 40px;
}
#nav_bar{
float: left;
width: 241px;
top: 0px;
padding: 0px;
margin: 0px;
height: auto;
}
#content_area{
background-image: url(images/layout1wslices_08.gif);
width: 741px;
float: right;
height: 606px;
position: relative;
}
#footer{
width: 981px;
height: auto;
clear: both;
}
#photogallery{
height: 466px;
width: 622px;
text-align: center;
left: 50px;
position: relative;
margin: 0px;
padding: 0px;
}
#homepage_text{
}
Last edited by mrflume; 06-17-2009 at 05:46 PM..
|
|
|
|
|
06-18-2009, 07:44 AM
|
Re: Problem with 2 Column layout
|
Posts: 108
Name: Yelnats
|
#content_area{
background-image: url(images/layout1wslices_08.gif);
width: 741px;
float: right;
height: 606px;
position: relative;
margin:10px auto; - add this to your code
}
|
|
|
|
|
06-18-2009, 12:02 PM
|
Re: Problem with 2 Column layout
|
Posts: 8,823
Location: Tennessee
|
Ummm.. you can't center something with margin: 10px auto, when it's being FLOATED RIGHT to start with it. It's one or the other - float right, or center. 
You really do not need all that positioning, most of the time it's just not necessary, and IE in particular has problems with it.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
06-19-2009, 12:44 AM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
www.lavabarrestaurant.com
So I got that issue figured out, now I'm having this issue of getting the left column and right column to be seamless. As you can see on some of the pages the right column may not line up with the left column. How can I go about making sure these are even no matter how much text is on the right column. Right now I'm using line breaks in the left column to position it just right to meet up with the bottom of the right column but I'm still having issues with this. Any help would be appreciated, Thanks.
|
|
|
|
|
06-19-2009, 02:33 AM
|
Re: Problem with 2 Column layout
|
Posts: 295
|
I don't see the issue... Did you fix it?
|
|
|
|
|
06-19-2009, 02:58 AM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
no i didn't...look at the bottom right of the menu's page...see how the side isnt lined up with the bottom? there shouldn't be a space there. I'm trying to figure out how to get both columns to line up in all browsers. Also, IE 6 on windows is distorting the layout. I definitely need to figure that out.
CSS Code:
Code:
#wrapper{
margin-right: auto;
margin-left: auto;
width: 982px;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
}
#header{
margin: 0px;
padding: 0px;
height: 297px;
width: 982px;
}
#header_right_bg{
background-image: url(images/layout1wslices_04.gif);
text-align: right;
min-height: 297px;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 265px;
height: 297px;
top: -297px;
position: relative;
padding-top: 10px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
background-repeat: no-repeat;
}
#nav_bar{
float: left;
width: 241px;
top: 0px;
padding: 0px;
margin: 0px;
height: auto;
background-image: url(images/layout1wslices_22.gif);
background-repeat: repeat-y;
}
#content_area{
background-image: url(images/layout1wslices_08_new.gif);
width: 741px;
margin-left: 240px;
max-width: 741px;
min-height: 607px;
background-repeat: repeat-y;
margin-right: 100px;
padding: 39px;
position: relative;
}
#footer{
width: 981px;
height: 69px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-image: url(images/main_bg.gif);
background-repeat: repeat-x;
}
.style3 {font-size: 14px}
.style6 {
font-size: 24px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style7 {
font-size: 16px;
font-weight: bold;
}
.style1 {color: #FF0000}
.style8 {color: #000000}
Last edited by mrflume; 06-19-2009 at 04:40 AM..
|
|
|
|
|
06-19-2009, 10:31 AM
|
Re: Problem with 2 Column layout
|
Posts: 8,823
Location: Tennessee
|
The easiest solution to this problem is called faux columns, works like a charm with a minimum of hair-pulling aggravation 
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
06-19-2009, 03:50 PM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
Ok I implemented the faux columns...works great, I would have liked to have kept the little highlight that I had at the bottom of the left column but I'm not sure if the faux column thing will allow me to. Also, any idea where I should start in correcting my CSS for IE 6 + 7 on Windows?
Last edited by mrflume; 06-19-2009 at 05:26 PM..
|
|
|
|
|
06-19-2009, 11:08 PM
|
Re: Problem with 2 Column layout
|
Posts: 8,823
Location: Tennessee
|
You should be able to get that highlight in the left column, provided you set it up right. You'd need a separate div for that left column and put the highlight in as a background.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
06-20-2009, 04:15 AM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
Ok great. I will definitely sort that out tomorrow. Can you give me any advice on getting the site to look correct in IE 6 and 7 on windows?
|
|
|
|
|
06-20-2009, 10:49 AM
|
Re: Problem with 2 Column layout
|
Posts: 8,823
Location: Tennessee
|
I have to run out this morning, but I will give you this link for learning how to combat IE's many bugs - www.positioniseverything.net
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
06-22-2009, 08:56 PM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
Ladynred,
I went through the articles on that website but am still not sure what exactly I'm doing wrong. Basically, I tried to float the content_area div, and then the faux column stopped working, so I can't seem to figure out a way that works for both columns. Do you think I need to do some sort of hack that only IE will see and then the other browsers will stay the same? I haven't had to deal with this issue until now because my previous websites used a horizontal navigation system while this one obviously is a vertical nav system so I didn't realize the trouble I would be running into just by changing things up a bit, unfortunately. If you can analyze my code and point me in the right direction, I'd really appreciate it. Your always really helpful. Thanks!
HTML code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Lava Restaurant Bar & Brick Oven</title>
<link href="stylesheet4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/header.php"); ?>
</div>
<div id="nav_content_wrapper">
<div id="nav_bar">
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/nav.php"); ?>
</div>
<div id="content_area">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="622" height="466">
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<embed src="slideshow.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="622" height="466"></embed>
</object>
</div>
</div>
<div id="footer">
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/footer.php"); ?>
</div>
</div>
</body>
</html>
CSS code
Code:
#wrapper{
margin-right: auto;
margin-left: auto;
width: 982px;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
}
#header{
margin: 0px;
padding: 0px;
height: 297px;
width: 982px;
}
#header_right_bg{
background-image: url(images/layout1wslices_04.gif);
text-align: right;
min-height: 297px;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 265px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
background-repeat: no-repeat;
margin-top: -297px;
height: 297px;
}
#nav_bar{
float: left;
width: 241px;
top: 0px;
padding: 0px;
margin: 0px;
height: auto;
background-image: url(images/layout1wslices_22.gif);
background-repeat: repeat-y;
}
#content_area{
background-image: url(images/layout1wslices_08_new.gif);
width: 741px;
margin-left: 240px;
max-width: 741px;
min-height: 607px;
background-repeat: repeat-y;
margin-right: 100px;
padding: 39px;
margin-bottom: 0px;
position: relative;
}
#footer{
width: 981px;
height: 69px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-image: url(images/main_bg.gif);
background-repeat: repeat-x;
}
.style3 {font-size: 14px}
.style6 {
font-size: 24px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style7 {
font-size: 16px;
font-weight: bold;
}
.style1 {color: #FF0000}
.style8 {color: #000000}
.style9 {font-size: 21px}
.style10 {font-size: 21px; font-weight: bold; }
#nav_content_wrapper{
background-image: url(images/nav_content_bg.gif);
background-repeat: repeat-y;
}
|
|
|
|
|
06-23-2009, 11:52 AM
|
Re: Problem with 2 Column layout
|
Posts: 8,823
Location: Tennessee
|
Quote:
|
I tried to float the content_area div, and then the faux column stopped working,
|
Did you CLEAR the floats ??
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
06-23-2009, 02:52 PM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
i used the "clear both" code on the footer. Was I supposed to use it elsewhere?
|
|
|
|
|
06-23-2009, 03:39 PM
|
Re: Problem with 2 Column layout
|
Posts: 8,823
Location: Tennessee
|
Clear:both on the footer won't always work, as you've seen. Add overflow: auto to the container holding the floats instead.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
06-23-2009, 06:06 PM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
ok so I floated the content area div right and added the Overflow: auto to the wrapper for the nav bar and content area. In IE and Firefox the positions of the content area are the same but their still out of alignment with the nav bar. I noticed when I take the 39px of padding off the content area it locks up with the nav bar fine but then the content isnt padded obviously. Any ideas what isnt right here?
|
|
|
|
|
06-24-2009, 12:18 AM
|
Re: Problem with 2 Column layout
|
Posts: 8,823
Location: Tennessee
|
Quote:
|
In IE and Firefox the positions of the content area are the same but their still out of alignment with the nav bar.
|
Where is the misalignment ? I'm not seeing anything in Firefox.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
06-24-2009, 03:58 PM
|
Re: Problem with 2 Column layout
|
Posts: 81
Name: Ed
|
Well I put the site back the way i had it so it looked correct in firefox and safari, but do you have any idea why Firefox and IE were still behaving that way? The content area was basically sitting right under my nav bar and when I went to mess with the margins Firefox would line up fine but IE would still be out of whack. Do you want me to put it live again so you can see exactly what i mean?
|
|
|
|
|
« Reply to Problem with 2 Column layout
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
|
