开发者

DIV alignment problem

开发者 https://www.devze.com 2023-02-01 18:35 出处:网络
This is the website I\'m having problems with: http://bgflirt.com I need the menu on the left to have a fixed width and the part with the user pictures should resize when the browser window is resize

This is the website I'm having problems with: http://bgflirt.com

I need the menu on the left to have a fixed width and the part with the user pictures should resize when the browser window is resized (width in percent). However, as you can see - the part where the content is refuses to align on the right of the menu, but is instead displayed below it. Can someone help me with th开发者_开发知识库is ?


For #content_wrap remove width:100% and float:left. This will make box to stretch to fill all available horizontal space.
You'll need to also clear floats in whatever way you prefer. E.g., add overflow: hidden; to #content_wrap.

This works for me in firebug.

BTW, since you use fixed-width graphics for header and footer (frame with those nice rounded corners), you can't really stretch them.


Try using something like this for your CSS:

.container {
    position: relative;
}

.sidebar_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
}

.content_wrap {
    margin-left: 130px;
}

I believe that is much easier to work with than a float.


A couple of things.

First, get rid of the xhtml doctype and instead start using an html 4.01 strict doctype. xhtml, besides being on it's way out, has inconsistent rendering across a lot of browsers.

Second, this is MUCH easier to accomplish with a table. Just set the width of the table to 100% and the width of the first column to 130px. The layout engine will take care of sizing the other side. Incidentally, this will solve some of the other issues you're going to run into such as making both sides have the same height.


your #content_wrap div has a 100% width, like so it's impossible for it to float left when theres a menu with a 130px width...

You should make the menu's width in % if you really want to make the site resizable... something like

#sidebar_wrap{
width: 15%;
float: left;
}

#content_wrap{
width: 85%;
float: left;
}

note that the sum of the width can't be bigger than 100%, and you should take paddings and borders in consideration.

0

精彩评论

暂无评论...
验证码 换一张
取 消