Home/ Questions/Q 8739953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:02:44+00:00

I have thrown a quick example in jsfiddle to show you what is happening

  • 0

I have thrown a quick example in jsfiddle to show you what is happening and then I will explain what I want to achieve..

http://jsfiddle.net/4UMLq/20/

(code html – in jsfiddle)

<html>
<head>
</head>
<body>
    <div class="box1top">
    </div>
    <div class="box1middle">
        <p> Test </p><br />
        <p> Test </p>
    </div>
    <div class="box1bottom">
    </div>
        <div class="box1top">
    </div>
    <div class="box1middle">
        <p> Test </p><br />
        <p> Test </p>
    </div>
    <div class="box1bottom">
    </div>
</body>
</html>​

(code css – in jsfiddle)

.box1top {
    width: 150px;
    height:30px;
    background-color:#373737;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
}
.box1middle {
    width: 150px;    
    height:200px;
    background-color:#676767;
    margin-left:10px;
    margin-right:10px;
}
.box1bottom {
    width: 150px;
    height:10px;
    background-color:#373737;
    margin-left:10px;
    margin-right:10px;
}
.box2top {
    width: 150px;
    height:30px;
    background-color:#373737;
    margin-left:10px;
    margin-right:10px;
}
.box2middle {
    width: 150px;    
    height:200px;
    background-color:#676767;
    margin-left:10px;
    margin-right:10px;
}
.box2bottom {
    width: 150px;
    height:10px;
    background-color:#373737;
    margin-left:10px;
    margin-right:10px;
}

In the example above the bg colours are going to be images for boxes that will contain text (split into 3 images)

However I want to display these side by side in the browser window instead of underneath one another.. I have tried floating the elements ect and I just cant seem to get this right?

Has anyone got any ideas? Any help is appreciated

Thanks,
Carlos

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A general principle when coding (anything) is to keep it DRY (don’t repeat yourself).

    See here: http://jsfiddle.net/4UMLq/21/

    Luckily, CSS allows us to accomplish this easily:

    .box{
    float:left;
    margin:10px 10px 0 10px;
    width: 150px;
}

.box-top {
    height:30px;
    background-color:#373737;
}
.box-middle {   
    height:200px;
    background-color:#676767;
}
.box-bottom {
    height:10px;
    background-color:#373737;
}

#box2{
    margin-left:0;
}

    HTML:

    <div id="box1" class="box">
    <div class="box-top">
    </div>
    <div class="box-middle">
        <p> Test </p>
        <p> Test </p>
    </div>
    <div class="box-bottom">
    </div>
</div>    
<div id="box2" class="box">
    <div class="box-top">
    </div>
    <div class="box-middle">
        <p> Test </p>
        <p> Test </p>
    </div>
    <div class="box-bottom">
    </div>
</div>

    Note that the top, middle, and bottom divs are each nested inside of a “box” div. There is no reason to create duplicate boxNtop, etc CSS definitions, because many elements may share the same class name. So, if you want them all to look the same, it is easily done.

    • 0