www.webdeveloper.com
Results 1 to 7 of 7

Thread: How to put div next to centered div

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    7

    How to put div next to centered div

    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!

  2. #2
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27
    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.

  3. #3
    Join Date
    Feb 2013
    Posts
    7
    so the main div in the middle would have the float also?

  4. #4
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27
    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,

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    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

  6. #6
    Join Date
    Feb 2013
    Posts
    7
    Thanks a lot coothead! Worked great. Pretty simple, disappointed I didn't think of doing it like that.

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there safinn,

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


    coothed

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles