Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 233
  • Last Modified:

Scalable columns in 4-col CSS layout

Hi again everyone

Does the following sound straight forward or are there any potential nightmares?

The website needs to work for 800x600 resolutions without a horizontal scroll - though the design is designed to look best in 1024 resolution.

The current design is shown at its maximum fixed width - ie we don't want it to be completely expandable.

Each of the 4 columns is 217px. If we make those slightly scalable between 184min and 217max then the page would fit at any size between 780 and 920 px.

Can this be done? All the graphics can be cut to 184 maximum.

0
tingleweb
Asked:
tingleweb
2 Solutions
 
BatalfCommented:
Yes, it can be done, but I'm not sure how the end result will be.

One option is to determine which CSS file to include based on screen resolution.

example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>EE test</title>
<link rel="stylesheet" href="myCss.css" id="myStylesheet">
<script type="text/javascript">
if(screen.availWidth>1000){
    document.getElementById('myStylesheet').href='myCss_1024.css';    
}

window.onload=resizeContent;
</script>
</head>
<body>    
<div id="mainContainer" class="mainContainer">
    <div class="columnOne"></div>
    <div class="columnTwo"></div>
    <div class="columnThree"></div>
    <div class="columnFour"></div>
</div>
</body>
</html>

where the CSS files is something like this:

html,body{
    height:100%;
    padding:0px;
    margin:0px;
    background-color:#A4B5AD;
    text-align:center;
    font-family:Garamond;
}
.mainContainer{
    width:868px;
    margin:0 auto;
    text-align:left;
    height:100%;
}
.columnOne,.columnTwo,.columnThree,.columnFour{
    width:25%;
    height:100%;
    float:left;
}
.columnOne{
    background-color:#EEEEEE;
}
.columnTwo{
    background-color:#CCCCCC;
}
.columnThree{
    background-color:#BBBBBB;
}
.columnFour{
    background-color:#AAAAAA;
}

the diference between the two is the width attribute of mainContainer.

Another option is to set the width of the four colums to 25 % and resize the parent container in a window.onload event.

example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>EE test</title>
<style type="text/css">
html,body{
    height:100%;
    padding:0px;
    margin:0px;
    background-color:#A4B5AD;
    text-align:center;
    font-family:Garamond;
}
.mainContainer{
    width:736px;
    margin:0 auto;
    text-align:left;
    height:100%;
}
.columnOne,.columnTwo,.columnThree,.columnFour{
    width:25%;
    height:100%;
    float:left;
}
.columnOne{
    background-color:#EEEEEE;
}
.columnTwo{
    background-color:#CCCCCC;
}
.columnThree{
    background-color:#BBBBBB;
}
.columnFour{
    background-color:#AAAAAA;
}
</style>
<script type="text/javascript">
function resizeContent(){
    if(screen.availWidth>1000){
        document.getElementById('mainContainer').style.width = '868';    
       
    }
}
window.onload=resizeContent;
</script>
</head>
<body>    
<div id="mainContainer" class="mainContainer">
    <div class="columnOne"></div>
    <div class="columnTwo"></div>
    <div class="columnThree"></div>
    <div class="columnFour"></div>
</div>
</body>
</html>
0
 
neesterCommented:
It could easily be done for ONE browser.
making that cross browser functional, would be a nightmare...
:)

Sorry, not enough time tonight to finish this question for you.
0
 
GoofyDawgCommented:
If you don't mind fluid columns, this'll work (though it uses a box-model hack):

<style type="text/css">
  div { box-sizing: border-box; -moz-box-sizing: border-box; }
  .qtr {float:left; width: 25%!important;width:24.9%;border: 1px solid black;}
  .daddy { float:left; width:90%; }
</style>
<div class="daddy">
<div class="qtr"><H1>First</H1></div>
<div class="qtr"><H1>Second</H1></div>
<div class="qtr"><H1>Third</H1></div>
<div class="qtr"><H1>Fourth</H1></div>
</div>

GoofyDawg
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now