Jump to content

Recommended Posts

Hi, so I am trying to create a CSS page main up from 3 parts:

1: Main which holds parts 2 & 3.
2: Left which is a panel to the left of the page.

3. Right which the main section of the page located to the right off the left panel.

 

My problem is that the page works fine until it is collapsed to a point, where the right block drops below the left block. I am not sure why it does this. Ideally what I want to happen is when the page is collapsed the left and right blocks shrink. 

Any help would be great thanks! :D

 

You can see what I am talking about here: http://worldwarfare-v3.atwebpages.com

 

CSS code: 

#main{background-color:#FFFFFF; border-bottom:1px solid #1C2A49; height:auto; } 
#right{float:left; background-color:#FFFFFF; border-left: 1px solid #1F1C11; min-width:49%; max-width:79%; padding: 5px 5px; border-top: 1px solid #1F1C11;} 
#left{float:left; background-color:#FFFFFF; width:20%;} 
#full{height:auto;}

Edited by Freid001
Link to comment
https://forums.phpfreaks.com/topic/280340-help-using-css-left-and-right-blocks/
Share on other sites

I think if they have content they'll only shrink so far before one div drops below the other.

I looked at it and can't figure it out, however I placed your html code here http://validator.w3.org/#validate_by_input and came up with 14 error's.

Fix them and see if that helps

I would say use a minimum width but it's pretty wide when the right div falls

I just copied the page and css to my computer but not the header image. I then took the min width off and it worked. The only problem Is that it over rode the left column when I collapsed it.

So remove you header bg image and width and see if it works.

With that said the bg image shouldn't stop the collapse of the page.

 

I'd only have min width on the left column and min width on the main of about 400-500 or so.

Also you have the contents of the left column at 100% then 5px in padding, so your contents width is 100% plus (5px * 2)

 

 

also was the world of warfare graphic with the jet a background image?

Edited by floridaflatlander

Yeah it does kind of work now but I think I will still have the min width because other wise the left column collapse too much in on its self. So not sure how to stop that cos when I give the left block a min width that stops this then the right block goes below it again.

umh the world warfare graphic is just a logo for the site. Cant remember if it was supposed to be a back ground or not but what would u recommend? 

So I take it you didn't build this. Anyway I'd put another div inside the main div and give it the world of warfare graphic with the jet a background image, that way you'd have two background images in the two divs in the header, one with the gradient background image and the other with the graphic and jet

That sounds good I will look at adding that. Yes I did make this template, what do you think of it? 

This is v3 template: http://worldwarfare-v3.atwebpages.com

 

This is v2 template: http://worldwarfare.atwebpages.com

 

Which one do u think looks better? 

Edited by Freid001

yeah I was trying to fix the CSS probables to try and increase the sites accessibility across multiple platforms not just laptops/PC's. I am also looking at developing a mobile version of the site too.  :)

Edited by Freid001

yeah I was trying ... to increase the sites accessibility across multiple platforms not just laptops/PC's. I am also looking at developing a mobile version of the site too.  :)

 

Well the very first step will be fixing your html

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.