Okay, I'm rather new to computers, I mean really really new with them, I'm making a small page, just four boxes, one on top, one on bottom, and two side by side, spereated by a space, the right being larger. I can do the top, bottom, and the left,how do I put one to the right?

4 Years
Discussion Span
Last Post by Dragennd

Another easy way is to simply use absolute positioning. You tell your div layer how far from two sides of the page to be located at.

Example: <div z-index: 1; position: absolute; width: 100px; height: 150px; left: 10px; top: 20px;></div>

The above example will place a CSS layer 100 pixels wide and 150 pixels tall 10 pixels from the left and 20 pixels from the top.

This is ofcourse only an example and you can change which two sides you want your layer to hug.

Edited by Dragennd


Some of these responses may be challenging for you to understand do not understand HTML and CSS (styles).

Do you have any code written as of yet? How familiar are you with HTML?


Actually, If you do have the left column floated left, then the rest of the filled content will automatically go right, just make sure a fixed width is set to the left container, eg.

<div id="wrapper">
    <div class="left">
        <p>something like sidebar.</p>
    <p>Here will be some main content.</p>

meanwhile, the CSS will be

    overflow: hidden; /**this is to made the container wrap even the floated element's height is greater than the content**/

    width: 30%;

@Ips There are a few problems with floating. If there is anything else in the way of the layer it can throw it off of where it needs to be. I don't know if z-index affects floating the layers but if it does it would probably fix that issue. By using absolute positioning you avoid any layers overlaying another and can state exactly where you want them to go.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.