Website Layout Problem

kamalhilmi · #1 (**permalink**) 09-01-2008, 12:42 AM

Hello everyone here,

I am still new here and seeking for some help in designing my website. I am designing website with two column layout, header and footer which is fixed width 100%. In order to achieve this, I also use <div>. Everything seems to run well, unfortunately when I resize the browser, the font and layout seems to shrink. I am seeking for help so that whenever I resize the browser, the layout would be the same with the scrollbar at the left an bottom to view the page. I also attach here the picture for the problem in which I am trying to resolve. Thank you.

Before resize:
img134.imageshack.us/img134/305/beforedl5.th.jpg

After resize:
img179.imageshack.us/img179/4023/afterfy1.th.jpg
*Everything seems to go wrong, the font goes down and the layout also shrink

iamfreelancer · #2 (**permalink**) 09-01-2008, 04:10 PM

put your code out or link actual link to your html and/css page.... just by showing tat 2 small images... its hard for us to know what you have done in your coding....

again and again...plz help us to help you lar.....

kamalhilmi · #3 (**permalink**) 09-01-2008, 04:51 PM

Sorry for the technical problem, here is my code:

1.index.html

<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body class="twocolumn">
<div id="header">Some content</div>
<div id="left">Some content</div>
<div id="center">Some content</div>
<div id="footer">Some content</div>
</body>

</html>

2. style.css

@charset "utf-8";
/* CSS Document */
body{
color:#FFFFFF;
font-size:xx-large;
margin: 0;
padding: 0;
}
.twocolumn #header {
background-color:#00FF00;
padding: 10px;
height: 100px;
}
.twocolumn #left {
position: absolute;
background-color:#FF0000;
width: 200px;
height:400px;
}
.twocolumn #center {
background-color:#0000FF;
margin-left: 200px;
height:400px;
}
.twocolumn #footer{

background-color:#CC00CC;
}

Hope you can help me here, the only solution that I can find right now is changing the width to px or em which is quite difficult for me. Thank you.

mysticmind · #4 (**permalink**) 10-01-2008, 12:20 AM

before

after

mysticmind · #5 (**permalink**) 10-01-2008, 12:27 AM

its about position : absolute.
and about percentage.
and there's also fixed width.

you didn't understand the rule.
when doing mixed absolute + % + px = screw/mess up.
unless you had a very good math calculation

if you want a flexible layout... it's better use % and float.

tm89lee · #6 (**permalink**) 10-01-2008, 11:30 AM

Hmmph..so is there a way to prevent this?
so far i still can figure a way...
and prominent site like Digg...also has this kinda problem...
but no users will actually resize a site in such a way right?

iamfreelancer · #7 (**permalink**) 10-01-2008, 12:39 PM

Just like bro mystic says.... mixed absolute + % + px = screw/mess up.

you either stick with a fixed width in px/em or go everthing %... but the problem that you have in %, when you resize the screen the floating div will go messy also.

If you really wanted to go 100% of screen size, use the traditional html table coding and that will work better than CSS

the below is how i do it in %.. i would suggest you use a fixed width for all the div instead... ....

HTML code:

Quote:

<html>
<head>
<title>Test Page</title>
<LINK href="styles.css" type=text/css rel=stylesheet>
</head>

<body>
<div class="container">

<div class="header">
This is the header
</div>

<div class="LeftSidebar">
this is the leftsidebar

</div>

<div class="content">
This is the content
</div>

<div id="cleardiv"></div>

<div class="footer">
This is the footoer
</div>
<div>

</body>
</html>

Styles.css

Quote:

BODY
{
font-family: Verdana, Arial, Sans-Serif;
font-size: 9pt;
background: #FFFFFF;
}

div.container
{
width: 100%;
background: #FFFFFF ;
}

div.header
{
background-color: #FFFF99;
clear: left;
Height: 150px;
}

div.LeftSidebar
{
float: left;
width: 20%;
height: 200px;
background-color: #FFCC99 ;
}

div.Content
{
float: left;
width: 80%;
background-color: #00FFFF;
}

#cleardiv
{
clear: both;
}

div.footer
{
background-color: #99FF99;
width: 100%;
Height: 50px;
}

c2z.coe · #8 (**permalink**) 19-01-2008, 03:38 PM

Hello Guy...

May I know what is the different between using table and <div> to make the web page layout?

Is that using the <div> plus CSS is the better way?

How about this?

Code:

<style type="text/css">
.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 80%;
padding: 10px 0;
margin: 0;
text-align: left; 
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
border-right: 1px solid #B5E2FE; 
}
</style>

</head>

<body>
<!-- HTML CODE -->
<div class="chromestyle" id="chromemenu">
<ul>
<li>1st content</li>
<li>List</li>
</ul>
<ul>
<li>2nd content</li>
</ul>
<ul>
<li>3th content</li>
</ul>
</div>
</body>
</html>

What is the what the use of this?

Las time I use the table to do the layout, unfortunately the layout position is always run away depend on the browser screen resolution.
Any suggestion to over come this problem. Is that using <div> plus CSS and make it?

Waiting for solution.
Thanks

mysticmind · #9 (**permalink**) 19-01-2008, 06:30 PM

Quote:

Originally Posted by c2z.coe

Hello Guy...

What is the what the use of this?

Las time I use the table to do the layout, unfortunately the layout position is always run away depend on the browser screen resolution.
Any suggestion to over come this problem. Is that using <div> plus CSS and make it?

Waiting for solution.
Thanks

because you used % not fixed width.
do MATH calculation yourself.

kamalhilmi · #10 (**permalink**) 19-01-2008, 11:43 PM

It's quite sometimes since I posted this question, well the solution do works sometimes but I figured out something that when I used px instead of %, it did run well. Thanks for the solution iamfreelancer, but for those quite not familiar with the "<div>" thing. I suggest you better use the traditional table way to solve the layout problem.

c2z.coe · #11 (**permalink**) 20-01-2008, 02:00 AM

Quote:

It's quite sometimes since I posted this question, well the solution do works sometimes but I figured out something that when I used px instead of %, it did run well. Thanks for the solution iamfreelancer, but for those quite not familiar with the "<div>" thing. I suggest you better use the traditional table way to solve the layout problem.

Ya. I have also try using the px to fix the table's width. But somehow sometimes it is fail to show a good layout in different screen resolution.

Is that any thing have to avoid when using table?

Are this kind of problem will occur if using <div> CSS?

iamfreelancer · #12 (**permalink**) 21-01-2008, 09:24 AM

Quote:

Originally Posted by c2z.coe

Are this kind of problem will occur if using <div> CSS?

like our bro mysticmind mentioned... its the % problem.. no matter its css or traditional table code.. its still the same problem when using % on a resizable screen... however in a table manner, you can solv 90% of the problem if your coding is right....

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS layout	yipguseng	Website Design	11	17-05-2007 04:01 PM
problem with WMF layout loading	yipguseng	FeedBack & Suggestion	6	17-04-2007 10:26 AM
My First Blog Layout. :)	zola	Blogging Discussion	10	09-05-2005 06:29 PM
What do you think of my site's layout?	xaph	Websites Review and Suggestion	9	28-12-2003 02:47 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)