HTML Help

Discuss anything programming related.
Post Reply
User avatar
Zaid
Posts: 250
Joined: Sun Jan 09, 2011 2:07 am

HTML Help

Post 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>
User avatar
JacksonCougar
Huurcat
Posts: 2460
Joined: Thu Dec 06, 2007 11:30 pm
Location: Somewhere in Canada

Re: HTML Help

Post 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;
}
User avatar
Zaid
Posts: 250
Joined: Sun Jan 09, 2011 2:07 am

Re: HTML Help

Post 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;"
User avatar
Zaid
Posts: 250
Joined: Sun Jan 09, 2011 2:07 am

Re: HTML Help

Post 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>
User avatar
Zaid
Posts: 250
Joined: Sun Jan 09, 2011 2:07 am

Re: HTML Help

Post 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.
User avatar
JacksonCougar
Huurcat
Posts: 2460
Joined: Thu Dec 06, 2007 11:30 pm
Location: Somewhere in Canada

Re: HTML Help

Post by JacksonCougar »

If it's a fixed width layout I just float both containers to the left in a centered container using fixed widths.
User avatar
Zaid
Posts: 250
Joined: Sun Jan 09, 2011 2:07 am

Re: HTML Help

Post by Zaid »

I guess I'll just do that haha.
Post Reply