How to put div next to centered div

**safinn** · 02-16-2013 04:26 PM

If I have a div in the center of a page with the css

#div
{
width: 100px;
margin: 0px auto;
}

How do I get a div to the left of it(div 2) like in the image: http://i45.tinypic.com/34osvw3.png
that will never move from the left of it.

Thanks alot!

**waxdoc** · 02-16-2013 04:37 PM

Floats are kinda like position:absolute in that floated elements are partially taken out of normal HTML doc flow.

Using width: 30% for all, I found that if one element is float: left and another is float: right, I could add an element margin: 0 auto AFTER the floated elements and it would ignore them and be centered. Putting the centered element before the floated ones, did not work.

**safinn** · 02-16-2013 04:41 PM

so the main div in the middle would have the float also?

**waxdoc** · 02-16-2013 04:52 PM

NO. Do NOT float div with margin: auto; that would take it partially out of normal HTML flow.

I saw this on a post nd tried it. My explanation is a guess,

... add an element margin: 0 auto AFTER the floated elements and it would ignore them and be centered.

but it seems logical. The position of the centered element AFTER the floated ones is important,

**coothead** · 02-17-2013 04:38 AM

Hi there safinn,

try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>centered box with left appendage</title>

<style type="text/css">
#box {
    position:relative;
    width:100px;
    height:100px;
    margin:auto;
    background-color:#f88613;
 }
#hangeron {
    position:absolute;
    width:25px;
    height:100%;
    left:-25px;
    background-color:#0000eb;
 }
#center {
    width:6px;
    height:6px;
    margin:6px auto 0;
    border-radius:3px;
    background-color:#000;
 }
</style>

</head>
<body>

<div id="box">
 <div id="hangeron"></div>
</div>

<div id="center"></div>

</body>
</html>

coothead

**safinn** · 02-17-2013 07:08 AM

Thanks a lot coothead! Worked great. Pretty simple, disappointed I didn't think of doing it like that.

**coothead** · 02-17-2013 07:21 AM

Hi there safinn,

when you know the answer, then, of course, the question will no longer look difficult.

coothed

Thread: How to put div next to centered div

Thread Tools

Display

How to put div next to centered div

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions