How can I make a div stay to side of another div?

Question

I am trying to make a div stay to the side of another div. My main div is in the center of the page. I want the other div to stay on the side. http://jsfiddle.net/vgd9yr5s/1/

<body>
<div id="Home">
    <img src="Home.png" alt="Main div">
</div>
<div id="Left">
    <img src="Left.png" alt="Left div">
</div>

body {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding: 0px;
    margin: 0px;
    background: #000000;
}
#Home {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -128px;
    margin-left: -128px;
    width: 256px;
    height: 256px;
}

This is how far I have gotten. Sorry for newbie questions.

please have a look at CSS float property, google next time before posting the question this have been answered many times before. Refere [this](http://stackoverflow.com/questions/18531895/how-to-make-two-divs-float-side-by-side) — M4ver1k, Nov 01 '14 at 19:44

emmanuel · Answer 1 · 2014-11-01T19:55:30.250

0

If you want to keep absolute positioning, you could use the same settings for second div and set margin-left: 0.

#Left {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -128px;
    margin-left: 0;
    width: 256px;
    height: 256px;
}

Fiddle: http://jsfiddle.net/vgd9yr5s/5/

edited Nov 01 '14 at 19:55

answered Nov 01 '14 at 19:45

emmanuel

9,607
10
25
38

Thank you! That is exactly what I have wanted. Kudos to you! – Marko Vejnovic Nov 11 '14 at 20:57

score 0 · Accepted Answer · answered Nov 01 '14 at 19:47

Use the float:left CSS property. Here's a simple example page:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Example Page</title>
        <style>div {float:left; background:yellow; margin:3px;}</style>
    </head>
    <body>
        <div>Hello, World!</div>
        <div>Spam, Spam, wonderful spam...</div>
    </body>
</html>

score 0 · Answer 3 · answered Nov 01 '14 at 19:48

http://jsfiddle.net/vgd9yr5s/4/ /You can see the pictures. I want the left picture to stay near the centered one./

body {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding: 0px;
    margin: 0px;
    background: #000000;
}
#Home {
    position: relative;
    float:right;

    width: 256px;
    height: 256px;
}
#left{
 position:relative;
  float:left;


}

Is this what you're looking to achieve?

No, sadly it is not :( – Marko Vejnovic Nov 11 '14 at 20:56 — Marko Vejnovic, Nov 11 '14 at 20:56

How can I make a div stay to side of another div?

3 Answers3