Home/ Questions/Q 8913035
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T04:21:37+00:00

I’ve been playing with this code for almost half of the day and I

  • 0

I’ve been playing with this code for almost half of the day and I finally decided to pass it on to you. I would like to place three div elements next to each other with the left and right ones surrounding the main one. I would like both of the outer divs to contain only a background image and hence take on the same height as the middle div. I’ve been playing with solutions from other posts like this, but all of my tries were unsuccessful.

<!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" xml:lang="pl" lang="pl">
<head>  
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="content">
        <p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
    </div>
    <div id="right"></div>
</div>
</body>

CSS:

body {
    text-align: center;
}

div#container {
    width: 954px;
    margin: 0px auto;
    height: 100%;
    border: 1px solid lime;
    overflow: hidden;
    position: relative;
}

div#left {
    margin: 0px auto;
    width: 5px;
    border: 1px solid red;
    float: left;
    display: block;
}

div#right {
    margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
}

div#content {
    width: 920px;
    margin: 0px auto;
    text-align: left;
    background: #ffffff;
    padding: 0px 10px;
    float: left;
}
p {
    font: normal 16px/18px 'Trebuchet MS', Helvetica, sans-serif;
    margin: 20px 0px;
}

Thanks in advance for your help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ll need to add height: 100% to your body and html tags, as well as your div classes:

    html {
    height: 100%; /* <------------ */
}

body {
    text-align: center;
    height: 100%; /* <------------ */
}

div#container {
    width: 954px;
    margin: 0px auto;
    height: 100%;
    border: 1px solid lime;
    overflow: hidden;
    position: relative;
}

div#left {
    margin: 0px auto;
    width: 5px;
    border: 1px solid red;
    float: left;
    display: block;
    height: 100%; /* <------------ */
}

div#right {
    margin: 0px auto;
    width: 5px;
    float: left;
    border: 1px solid blue;
    height: 100%; /* <------------ */
}

div#content {
    width: 920px;
    margin: 0px auto;
    text-align: left;
    background: #ffffff;
    padding: 0px 10px;
    float: left;
    height: 100%; /* <------------ */
}
    • 0