Hello NG,
I am quite new to CSS and currently trying to change our sites to better use
CSS for easier site style/layout configuration.
I am having some problems and I couldn't find any good help Googling the
net. So I was hoping someone would be able to help me here.
The problem is very simple. The feature I'm trying to replicate is a very
basic table layout.
----------------------------------------------------------------------------
--
<html>
<table align="center" border="0" width="600">
<tr><td colspan="2" align="center" valign="top">top</td></tr>
<tr><td width="400" align="left" valign="top">left</td><td width="200"
align="left" valign="top">right</td></tr>
<tr><td colspan="2" align="center" valign="top">bottom</td></tr>
</table>
</html>
----------------------------------------------------------------------------
--
This case is a fixed width table centered to the page with one centered
column at top, two fixed width columns at the center and one centered column
at the bottom. Quite simple.
I was able to replicate this with the following CSS / HTML.
----------------------------------------------------------------------------
--
style.css:
#header {
position:relative;
width:600px;
left:50%;
margin-left:-300px;
text-align:center;
}
#midleft {
position:relative;
width:600px;
left:50%;
margin-left:-300px;
}
#midright {
float:right;
width:200px;
}
#footer {
position:relative;
width:600px;
left:50%;
margin-left:-300px;
text-align:center;
}
index.html:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="header">
top
</div>
<div id="midleft">
<div id="midright">
right
</div>
left
</div>
<div id="footer">
bottom
</div>
</body>
</html>
----------------------------------------------------------------------------
--
This is a working configuration, but I would like to be able to take the
"midright" DIV out of the "midleft" DIV so I could change the whole layout
with just the CSS.
I would like people to be able to select which layout they want and I would
not have to change to HTML file at all. So I could change top->bottom or
left->right etc. Using this CSS the "midright" is always INSIDE the
"midleft" area.
Or am I complete off track thinking that having the DIVs on the same level
the positioning would be easier?
Best Regards,
Joni
