CODEWITHSUNDEEP
csshtmlcss-floatright-align
agent73
agent73

Reputation: 25

align div right (not to right screen edge)

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.

Upvotes: 0

Views: 2867

Answers (6)

web-tiki
web-tiki

Reputation: 103770

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;
}

Upvotes: 1

JunM
JunM

Reputation: 7150

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;

}

Upvotes: 1

Brett Caswell
Brett Caswell

Reputation: 1504

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>

Upvotes: 0

Mathias
Mathias

Reputation: 5672

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/

Upvotes: 1

Daniel Bejan
Daniel Bejan

Reputation: 1468

You could try this

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

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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.

Upvotes: 0

Related Questions