I'm having trouble creating this design. The #container
should be centered, with it's two children #navigation
and #content
stretching to the bottom of the browser. Like this for example.
#container {
width: 960px;
height: 100%;
margin: 0 auto;
}
#navigation {
width: 200px;
height: 100%;
float: left;
}
#content {
width: 760px;
height: 100%;
float: left;
}
But I don't know how I can create the colored blank spaces outside the container, which will blend in with the #navigation
and #content
creating a seamless transition from the #container
to the blank space outside.
The transition between the #navigation
and the #content
should be the only visible.
I've tried floating the #container
with two other div's containing the same background-color as #navigation
and #content
, but that messes it up, and trows it out of the center. How can I have my #container
centered and have two div's on each side to fill in the remaining space?
Also, the blue and the red "blank" spaces was supposed to be equally wide. Besides that the drawing is accurate.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…