align div right (not to right screen edge)

StackOverflow https://stackoverflow.com/questions/22142311

Question

I'm just learning and I'm trying to make my 4 div's layout to my desired page size (not to whatever size the user's window is open to). Basic problem, but I can't get my right div to attach to the left div and not necessarily the right side of the user's window.

Here is my code and thank you in advance.

HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>all.about.me</title>
      <link rel='stylesheet' type='text/css' href='me_stylesheet.css'/>
   </head>
   <body>
      <div id="header">
         <p>March 02, 2014
            <br><br>Hello.
            <br>
         </p>
      </div>
      <div id="left"> </div>
      </div>
      <div id="right">    </div>
      <div id="footer">
         </a>
      </div>
   </body>
</html>

CSS:

p
{
    font:10px verdana,sans-serif;
    color: white;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

body
{
    background-color: red;
}

div {
    border-radius: 0px;
}

#header {
    height: 80px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
}

#footer {
    height: 35px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
    clear: both;
}


#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

#right {
    height: 385px;
    width: 300px;
    background-color: black;
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

I know it's a basic question and I could probably find the answer on Google, but you coders in here always have different and unique ways of doing things that really does inspire creative coding. Thanks for the help.

Was it helpful?

Solution

I would suggest you use float: left on both .left and .right. That will place the right div to the right next to the left div.

http://jsfiddle.net/AB2VE/1/

OTHER TIPS

Remove float:left and float:right on left and right elements. Use display: inline-block

Fiddle

Also, you can just use float:left on left element and remove float:right on right element.

Fiddle

#left {
   display: inline-block;
   height: 385px;
   width: 122px;
   background-color: black;
   //float: left;
   margin-right: 5px;
   margin-bottom: 5px;

}

#right {
   display: inline-block;    
   height: 385px;
   width: 300px;
   background-color: black;
   //float: right;
   margin-right: 5px;
   margin-bottom: 5px;

}

All yo have to do is to wrap your elements in a div and give it the with of your desired page like this :

FIDDLE

HTML: 

<div id="wrap">
    <div id="header">
        <p>March 02, 2014
            <br/>
            <br/>Hello.
            <br/>
        </p>
    </div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="footer"></div>
</div>

CSS:

#wrap {
    width:600px;
}
p {
    font:10px verdana, sans-serif;
    color: white;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
body {
    background-color: red;
}
div {
    border-radius: 0px;
}
#header {
    height: 80px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
}
#footer {
    height: 35px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
    clear: both;
}
#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}
#right {
    height: 385px;
    width: 300px;
    background-color: black;
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

You have two things to do:

  1. Use a .wrap

    .wrap {width: 900px; margin: auto;}

    And put all the HTML Content under it. This centers the contents.

  2. Remove floats. In your code, remove float: left and float: right for the #left and #right.

You could try this

#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

to make your 'right div' (div#right) attach to your 'left div' (div#left), simply put div#right inside div#left, making it a child. and position it relative to it's parent container.. which requires div#left to have a position style set to relative.

Your css should be as followed;

CSS

div#left {
height: 385px;
width: 122px;
background-color: black;
display:block;
position:relative;
}

div#right {
height: 385px;
width: 300px;
background-color: black;
position: absolute;
left:100%;
top:0;
display:block;
}

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>all.about.me</title>
      <link rel='stylesheet' type='text/css' href='me_stylesheet.css'/>
   </head>
   <body>
      <div id="header">
         <p>March 2<sup>nd</sup>, 2014
            <br /><br />Hello.
            <br />
         </p>
      </div>
      <div id="left">
        <div id="right"></div>
      </div>
      <div id="footer">
      </div>
   </body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top