Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Fixed Width to Fluid Width CSS Design
Old 12-21-2009, 09:18 AM Fixed Width to Fluid Width CSS Design
Super Talker

Posts: 148
Trades: 0
Hi all,

I have been playing around with the http://sbitips.sitesell.com/iDesign3-1.zip with template files to work with. However, i noticed that the page (Look at #PageWrapper in the CSS file) is fixed at 960px width.

However, if i want the page to be flexible, i should be setting it to perhaps maybe 90% which i believe plays nicely with the browser size opened smaller than 960px. There would be a problem with the background.gif which is set at 960px if i change the width in PageWrapper to 90% for instance. The alignment of the 2 columns on the left (remaining background of the columns until the footer is using background.gif). Any work around this?

Look at this screenshot here and take note of the 2 shades of blue on the most left and right column. Background of those columns made continuous until footer by using background.gif that is 960px.




If i change the width to 90% for PageWrapper in the css file, the alignment would be totally chaotic due to the fixed width of the PageWrapper and the background.gif.


Code:
/* ------ Section 1 - Global Body, Font and Link Settings ------ */
#PageWrapper {
width: 960px;
border: 2px solid #000000;   /* dark sea blue, headlines and borders */
}

Code:
/* ------ Section 3 - Page Structure Details ------ */
#PageWrapper {
margin: 24px auto;
background-repeat: repeat-y;
background-image: url(../image-files/background.gif);
}

So i want to set maximum size of my web page to be at most 1050px. If my page is set to maximum width of 1050px, then my alignment of the page would be a chaotic as well.

Code:
#FluidDesignWrapper{
width:expression(document.body.clientWidth> 1051? "1050px":"auto");
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}
My question is there anyway i can make my website fit based on the browser size without having any horizontal scrollbar based on this iDesign template and without having my alignment off? I am using it as a basis to revamp my website to a 3 column page as it is now 2 column.

I hope i am making sense and someone please let me know if i am not. Thanks!
shaoen01 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Reply     « Reply to Fixed Width to Fluid Width CSS Design
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.89639 seconds with 12 queries