I’m trying to make two containers for a home page (inline) but am having trouble getting them to draw out properly.
CSS
#topcontainer {
background-color: #000000;
height: 305px;
position: relative;
width: 100%;
}
#topcontainer .toplcontainer { height: 100%; background-color: #202020; }
#topcontainer .toprcontainer { height: 100%; background-color: #202020; }
.toplcontainer {
margin: 0 auto;
padding: 0px;
position: relative;
text-align: left;
width: 399px;
display: inline;
}
.toprcontainer {
margin: 0 auto;
padding: 0px;
position: relative;
text-align: left;
width: 399px;
display: inline;
}
HTML
<div id="topcontainer">
<div class="toplcontainer">top left container</div>
<div class="toprcontainer">top right container</div>
</div>
doesn’t display the whole 399×305 container
any help?
change display to block and add float:left to both
remove all instances of position relative
and if you’re wanting to horizontally center the whole thing, pull margin: 0 auto; out, and add this
body{
text-align:center;
}
#wrapper{
text-align:left;
margin:0 auto;
}
and change your markup so the wrapper wraps other content
<body>
<div id="wrapper">
<div class="toplcontainer">top left container</div>
<div class="toprcontainer">top right container</div>
</div>
</body>
|
change display to block and add float:left to both
remove all instances of position relative and if you’re wanting to horizontally center the whole thing, pull margin: 0 auto; out, and add this #wrapper{ and change your markup so the wrapper wraps other content |
thanks!
I was using the inline because I was trying to make the containers next to eachother. Will I not be able to do that?
|
float will do that. see this for a sample
|
I got it to work with inline-block.
is that bad?
thanks