Expanding centered div, on left side

HTML & CSS
1

Hello

I have a div which is placed on the center of the page.
How do I expand this div just on the left side of the side.

I have attached an image to show you what I mean.

2

this should point you in the right direction:

<html >
<head>
<title>Untitled Page</title>
<script type=“text/javascript”>
function grow(id)
{
//alert(id);
var grow_size = 100;
var obj = document.getElementById(id);
var obj_w = parseInt(obj.style.width);

        if(obj_w &gt; 200)
        {
            obj_w = (obj_w - grow_size) + 'px';
            document.getElementById(id).style.width = obj_w;
            
            var obj_l = parseInt(obj.style.left);
            obj_l = (obj_l + grow_size) + 'px';
            document.getElementById(id).style.left = obj_l;
            
            document.getElementById(id).innerHTML = "click me to resize bigger";
        }
        else
        {
            obj_w = (obj_w + grow_size) + 'px';
            document.getElementById(id).style.width = obj_w;
            
            var obj_l = parseInt(obj.style.left);
            obj_l = (obj_l - grow_size) + 'px';
            document.getElementById(id).style.left = obj_l;
            
            document.getElementById(id).innerHTML = "click me to resize smaller";
        }
    }
&lt;/script&gt;

</head>
<body>
<form id=“form1”>
<div id=“aDIV” style=“border: 1pt solid black; width:200px; height: 30px; background-color:Orange; position: absolute; top:0px; left: 200px;” onclick=“grow(this.id);”>click me to resize bigger</div>
</form>
</body>
</html>

3

why is it such complicated javascript for something this simple? i thought it would involve altering the left margin or something.

4

not really that complicated its just setting the left and the width of the div, the above code was just an ugly bulky proof of concept :slight_smile:

5

You can do this but you’ll lose the left side content on small windows.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
	width:400px;
	margin:auto;
}
.inner {
	background:#fcf;
	border:1px solid #000;
	padding:10px;
	margin:20px;
}
.inner2 {
	margin-left:-200px;
	position:relative;/* ie6 and 7 fix*/
	zoom:1.0;/* ie6 and 7 fix*/
}
</style>
</head>

<body>
<div class="wrap">
		<div class="inner">
				<p>Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here </p>
		</div>
		<div class="inner inner2">
				<p>Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here </p>
		</div>
</div>
</body>
</html>