Elements on same line

Hi,

I’m new to CSS and have a problem with the basic positioning.

I want some of the elements to be lined up three together horizontally.

I made a simple sketch of the layout available on this link:

https://sites.google.com/site/pagelayout789/

Can anyone point me in the right direction on which technique to use for the positioning?

I have tried float and absolute positioning but get different problems depending on which screen resolution that is used.

Many thanks for any help!

Hi,

Welcome to Sitepoint :slight_smile:

Although I can see your drawing it really only tells half the story as layouts are never even blocks of content like that.:slight_smile:

I’m guessing that you have blocks of fluid text that you want in columns and in that case you would just float them width the appropriate width and then making sure that the following element is set to clear:both so that it starts on a new line.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0 0 1em
}
html, body {
    margin:0;
    padding:0;
}
#outer {
    width:760px;
    border:1px solid #000;
    padding:1px 0;
    margin:auto;
}
.column {
    float:left;
    width:240px;
    background:#fcf;
    margin:0 0 1em 10px;
}
.column p {
    margin:0 10px 1em;
}
h1, h2, #footer {
    clear:both;
    margin:0 0 1em;
    padding:10px;
    text-align:center;
    background:#fcc;
    border:1px soslid #000;
}
</style>
</head>
<body>
<div id="outer">
    <h1>Test Heading</h1>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. </p>
    </div>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, . </p>
    </div>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl </p>
    </div>
    <h2>Sub Heading</h2>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. . </p>
    </div>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, . </p>
    </div>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus.. </p>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>


You will rarely use absolute positioning for structural elements but mainly for smaller pieces of the jigsaw that don’t need to take part in the flow.

Paul,

I cannot thank you enough. I spent a long time getting this right but missed the clear:both; line. I edited everything in line with your example and now it’s perfect.

Again, many thanks!