Home/ Questions/Q 4235784
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T02:32:57+00:00

I have the div on the left holding the wing that has a float

  • 0

I have the div on the left holding the “wing” that has a float left applied to it but what I need is that the middle div (there is one containing div2and3) to always be centered which I can do but if the width of the window is to small it pushes the mid container off screen because the left div locks on the edge.

I need that left div to not be “solid” so that it can be off the screen and not affect the auto margins on the middle div. Anyone? If you need more explanation I can onlytalk for another 20 minutes (im in class) and my internet was out last night/this morning we will see when I get home if its up.

(ignore my aquarium in the background it was the project we just did in this class)

Screencap:

http://i53.tinypic.com/2lu3oz9.png 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banta - Homepage</title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
body {
    background-image: url(images/backgroundd.png);
}
body,td,th {
    color: #0d2927;
}
</style>
</head>
<body>
<div id="maincont">
<div id="middlecont">
<div id="leftwing">
</div>
<div id="header">
</div>
<div id="body">
Lorem ipsum doler sit AMETTTTTTTTTTTTTTT FILLER TEXT FILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXT
</div>

</div>
<div id="rightwing">
</div>
</div>

</body>
</html>



    @charset "utf-8";
/* CSS Document */

body{
    font-family:Verdana, Geneva, sans-serif;
}

#maincont {
    margin:auto;
    width:1518px;
    height:782px;
}

#leftwing{
    min-width:0%;
    background-image:url(images/leftside.png);
    width:405px;
    height:449px;
    position:absolute;
    left:-405px;
}

#rightwing{
    float:right;
    background-image:url(images/rightside.png);
    width:405px;
    height:449px;
    margin-top:-782px;
}

#middlecont{
    position:relative;
    margin:auto;
    width:708px;
    height:782px;
}

#header{
    background-image:url(images/headhome.png);
    width:708px;
    height:150px;
}

#body{
    background-image:url(images/bodybg1.png);
    width:708px;
    height:632px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This works — I tested it in Chrome, IE8, FF 4.

    The left “wing” is still solid (fixed width), but the absolute positioning means it doesn’t affect the centering of the middle div. It will politely move off-stage to the left, gradually, as the view-port’s width is reduced.

    Place div1 inside middleDiv, and use absolute positioning — you must apply {position:relative} to the middle div.

    <!DOCTYPE  html>

<html>
<head>
<style>
    div{outline:1px solid gray;}
    #div1{position:absolute;height:300px;width:100px;left:-100px;}  /*the value of the left property should be negative the value of the div's width */
    #div2, #div3{height:200px}
    #middleDiv{width:300px;margin:auto;position:relative;}
</style>
</head>

<body>
    <div id="middleDiv">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>
</html>

    (Note: outline won’t work in IE7 or less, it’s just here to show the location of the divs.)

    • 0