Jump to content

Centering a Div inside another?


Solarpitch

Recommended Posts

Hey Guys,

 

Please look at the attached image. I have a div call left and right panel. When I hide the right panel using JS which I've created, I want to center the left panel in the wrapper like shown. I've tried a few different options using pargin auto and % scaling but not which much look.

 

 

 

[attachment deleted by admin]

Link to comment
Share on other sites

without code its hard to do these things, but here's something to try.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container
{
border: red solid 1px;
width: 500px;
height: 175px;
margin: auto;
}
#left
{
background-color: #330033;
float:left;
width: 300px;
margin: auto;
}
#right
{
float:right;
color: #FFFFFF;
background-color: #000;
width: 155px;
height:100%
}
</style>
</head>
<body >
<div id="container">
<div id="left">
<h2>welcome home</h2>
<p>You big bad beautiful doll</p>
<p>You big bad beautiful doll</p>
<p>You big bad beautiful doll</p>
</div>

<div id="right">three little fishes</div>
</div>
</body>
</html>

If you comment out the "right" div in the body tag AND comment out float:left; in the #left css things are the way you want.

Now see how to incorporate that.

Link to comment
Share on other sites

Hey Guys,

 

Please look at the attached image. I have a div call left and right panel. When I hide the right panel using JS which I've created, I want to center the left panel in the wrapper like shown. I've tried a few different options using pargin auto and % scaling but not which much look.

It would indeed be useful if you would actually post code, instead of asking us to write the code for you.

If you know how to set the css withjavascript all you have to do is to remove the float on the element and add margin:0 auto; ones you make the other dissapear.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.