469,646 Members | 1,339 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,646 developers. It's quick & easy.

CSS positioning problem

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
Jul 20 '05 #1
3 2502
Joni a écrit :
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.
Sorry if I haven't quite grasped the question, but why did you have to
nest them in the first place?
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?


Well, yes, you'd be able to position them independently of each other,
whereas at the moment any changes you make to "midleft" will impact
"midright".

Jon

Jul 20 '05 #2
Does it ever make sense to nest DIVs?

--
######################
## PH, London ##
######################
Jonathan Melhuish wrote:
Joni a écrit :
> 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.


Sorry if I haven't quite grasped the question, but why did you have to
nest them in the first place?
> 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?


Well, yes, you'd be able to position them independently of each other,
whereas at the moment any changes you make to "midleft" will impact
"midright".

Jon

Jul 20 '05 #3
Philip Herlihy wrote:
Does it ever make sense to nest DIVs?


<div id="content">
<h1>headline</h1>
<div class="imageBlock">
<img src="..." alt="..." ...>
<div class="subline">subline</div>
</div>
<p>text</p>
</div>
<ol id="menu">
<li><a href="foo">foo</a></li>
<li><a href="bar">bar</a></li>
</ol>

But that's an HTML question, so xpost and f'up2 ciwah.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Mike Anderson | last post: by
reply views Thread by Asad | last post: by
2 posts views Thread by Tim Charles | last post: by
4 posts views Thread by CJM | last post: by
1 post views Thread by Ren | last post: by
3 posts views Thread by Axel Siebenwirth | last post: by
2 posts views Thread by TheCruelPanda | last post: by
4 posts views Thread by Randell_D | last post: by
6 posts views Thread by sooshi | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.