Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

I NEED HELP! 3 Column Layout Not working well

Featured Replies

Hey Guys

 

If you go here http://tinyurl.com/5j57tj you will see an obscenely long auto insurance request form. The form works but I can't get my columns to line up. And right now my left column even though there are a crap load of line breaks won't move down. Through the site that I have done now the columns won't line up either so suggestions are totally wanted and welcome. Thanks so much guys in advance.

 

-Seth :hi:

hiya just a thought but have you used any floats and if so have you cleared them or can you post the css

  • Author

Yea I'm definitely using floats but I'm not sure if some of it isn't right.

 

My layout CSS sheet is below Let me now if you guys need anything else. Thanks again!

 

@charset "utf-8";
/* CSS Document */
#wrapper {
width:818px; 
height:auto; 
margin:auto;
}
#leftHeader {
width:206px; 
height:139;
float:left;
}
#centerHeader {
width:427px;
height:139px;
float:left;
}
#rightHeader {
width:185px;
height:139px;
float:left;
}
#mainLeft {
width:206px;
height:auto;
float:left; 
background-image:url(../images/base/spencer_04-sm.jpg);
}
#mainCenter {
width:427px; 
height:auto; 
float:left; 
background-image:url(../images/base/spencer_05-sm.jpg);
}
#mainRight {
width:185px; 
height:auto; float:left; 
background-image:url(../images/base/spencer_06-sm.jpg)
}
#leftMainLower {
width:206px;
height:43px; 
float:left; 
clear:left
}
#centerMainLower {
width:427px;
height:43px;
float:left;
}
#rightMainLower {
width:185px; 
height:43px; 
float:left;
}
#leftFooter {
width:206px; height:31px; float:left;
}
#centerFooter {
width:427px;
height:31px; 
float:left; 
background-color:#FFF;
}
#rightFooter {
width:185px; 
height:31px; 
float:left; 
background-color:#FFF;
}
#cright {
width:818px; 
height:auto; 
clear:both; 
margin:auto;
}
#onePX {
width:206px;
height:2px;
}
#onePX-2 {
width:185px;
height:2px;
}
#4pxRt {
width:185px;
height:4px;
background-image:url(../images/base/spencer_06-sm.jpg);
}
#autoTable {
width:427px;
height:auto;
}

  • Author

Okay here's something interesting

 

When I add a background-image to the wrapper to continue the columns down below where they stopped. The wrapper background shows up in IE7 but not in FF. And what's worse the whole site looks like poop in IE6 What gives. Please let me know how I can fix this. Thanks. Because that would solve the column problem.

  • Author

it doesn't like my mainRight style but when i get rid of that it only shows part of the sides even though it's part of the background. I'm getting really pissed off.

  • Author

Help me please!

am free to help you tonight can you send me a zipped copy of the page and css to my email tuck.bloor@ntlworld.com i will spend the night on it for you

  • Author

thanks man i sent it to you.

  • Author

Holy sh!t! I think i figured it out! Not sure yet! I'll let you know!

  • Author
what did you do?

 

Funny thing that. I don't remember. I was in a trance or something. I wish I did remember.

 

-Seth :hi:

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.