Page 1 of 1
HTML Help
Posted: Thu Apr 04, 2013 6:28 pm
by Zaid
I want to know how to center container and then put sideBar on container's right side.
Should be really easy.. But I can't figure it out haha.
Code: Select all
<style>
#container {
width:600px;
height:2000px;
border:3px solid green;
}
#sideBar {
width:200px;
height:300px;
margin-left:20px;
border:3px solid red;
}
</style>
</head>
<body>
<div id="container">
</div>
<div id="sideBar">
</div>
</body>
Re: HTML Help
Posted: Thu Apr 04, 2013 7:18 pm
by JacksonCougar
Code: Select all
#container {
position: relative;
width:600px;
height:2000px;
margin: auto;
border:3px solid green;
}
#sideBar {
position: relative;
right: 300px;
width:200px;
height:300px;
margin-left:20px;
border:3px solid red;
}
Re: HTML Help
Posted: Thu Apr 04, 2013 8:17 pm
by Zaid
That doesn't work for some reason. Thanks though.
The sidebar isn't visible. It appears on the bottom left corner of the window when I remove "right:300px;"
Re: HTML Help
Posted: Thu Apr 04, 2013 8:38 pm
by Zaid
Alright, got it working.
Code: Select all
<style>
#container {
width: 500px;
min-width: 500px;
border: solid 1px black;
}
#tablee {
margin: 0 auto;
}
#sidebar {
width: 120px;
height: 120px;
border: solid 1px black;
}
</style>
Code: Select all
<table id="tablee">
<tr>
<td style="width: 120px;"></td>
<td id="container"></td>
<td id="sidebar"></td>
</tr>
</table>
Re: HTML Help
Posted: Thu Apr 04, 2013 8:43 pm
by Zaid
I don't really like that way though... So if you can still help me make your way work, that would be great.
Re: HTML Help
Posted: Fri Apr 05, 2013 6:41 am
by JacksonCougar
If it's a fixed width layout I just float both containers to the left in a centered container using fixed widths.
Re: HTML Help
Posted: Fri Apr 05, 2013 5:01 pm
by Zaid
I guess I'll just do that haha.