Column Sizing Problem

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8409
  • Loc: USA

Post 3+ Months Ago

I have two columns on my site which I can't get it to be exactly the same size like I had with my previous two versions of my site.

I'm approaching this the same way I have the last 2 times and it's not working. I don't know why. I don't know what else to do.

I don't want to go with an image on the container div (site_wrap) because if you re-size the screen, I want the left column to re-size accordingly. I hope that made sense :lol:


Thank you :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

so you want the navigation bar and the forum area to be the same width?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8409
  • Loc: USA

Post 3+ Months Ago

mindfullsilence wrote:
so you want the navigation bar and the forum area to be the same width?

Yes and a grey line under both of them for the copyright.

Like the this. (That is from one of the previous projects).
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

hmmm, I think I'm misunderstanding. If you want both columns to be of equal width than you would set the css property for both "left_column" and "right_column" to 50%
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

Are you counting the sidebar as a column and the content area as a column? Is that the 2 columns your talking about?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8409
  • Loc: USA

Post 3+ Months Ago

CXLink wrote:
Are you counting the sidebar as a column and the content area as a column? Is that the 2 columns your talking about?

Yes sir.
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

Not sure I am following what you mean. The columns here aren't exactly the same width, one is 20% and one is 77%.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8409
  • Loc: USA

Post 3+ Months Ago

CXLink wrote:
Not sure I am following what you mean. The columns here aren't exactly the same width, one is 20% and one is 77%.

I'm not sure what I mean as well, I meant height not width. Sorry.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

okay, I gotcha. So you meant you wanted the navbar to be the full height of the page. I remember seeing the shadow next to the navbar not extending all the way to the bottom. Looking at it now it looks like you fixed it. Is this an accurate assumption?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8409
  • Loc: USA

Post 3+ Months Ago

I didn't fix that... The left column is higher (taller, bigger, whatever), the the right column.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

have you tried giving "site_wrap" a specified height like 100%?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8409
  • Loc: USA

Post 3+ Months Ago

mindfullsilence wrote:
have you tried giving "site_wrap" a specified height like 100%?

Yes, I have. That doesn't work.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

have you added the astrisk hack?

Code: [ Select ]
* {
margin: 0px;
padding: 0px;
}
  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. }
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

also, right now your left_column is taller than your "right_column"

left_column is set to 100%

right_column height is not declared

left_column has 2 position properties. float:left and position:absolute

try removing float:left from left_column.

add left:0; and top:25px; to left_column
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8409
  • Loc: USA

Post 3+ Months Ago

That didn't do anything.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

heh, I'm still trying to see the problem on the page...
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

there's a large space at the bottom of the right column where the content is held. It's caused by the navbar, or left column being higher than the right column. He neeeds to remove the space at the bottom and place the footer at the bottom of the page. I'm trying to figure out why there's a space there
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8409
  • Loc: USA

Post 3+ Months Ago

UPSGuy wrote:
heh, I'm still trying to see the problem on the page...

The left column used to extend beyond the right column... I have finally fixed that.

Thank you guys for the attempt.

The problem was that the main wrapper (site_wrap) included the header div as well, but the left column was under the header div, and since the height was set to 100% it was 100% (Exactly the same size site_wrap div, which included the right column AND the header div... moving the div site_wrap just to cover the left and right column did the trick... then I moved the footer out of the site_wrap so the color would be under the left column and the right column.

I hope that made sense :lol:

@UPSGuy: I hope you can see a difference now... You may need to do a hard refresh since I made some CSS changes as well.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

wow, simple fixes...whoda thunk

Post Information

  • Total Posts in this topic: 19 posts
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.