CODEWITHSUNDEEP
csshtmlposition
Mihai Bujanca
Mihai Bujanca

Reputation: 4219

Splitting the page in two sections

What I am trying to achieveI have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that. What I am trying to do is to divide the page in two sections. I've created two divs for that, but the problem is the way they are positioned. My code is the following:

<style>
.choose_div{
  width: 20%;
  height: auto;
  padding: 1px;
  left: 0px;
  border: 2px;
}
.frame_div{
  right:0px;
  height: auto;
  width: 80%;
  border: 2px 2px 2px 2px;
  position: relative;
}
</style>
  <div id="choose_div">
    <ul>
      <li class="li_choose">
        <div class="li_div">
          <p>Save</p>
            <img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
           <hr>
        </div>
      </li>
    </ul>
  </div>
<div id="frame_div">
  <iframe id="frame_opened">
</div>

I thought that right:0px; for one and left:0px;for the other would position them properly, but they are just one at the bottom of the other.
Can anyone please help with this?

Upvotes: 1

Views: 2926

Answers (3)

Nik Drosakis
Nik Drosakis

Reputation: 2348

    <style>
html,body{margin:0;}
#choose_div{
  display:block;
  float:left;
  width: auto;
  height: 100%;
  padding: 1px;
  }
#frame_div{
 float:right;
 height: auto;
  width: 80%;
  height: 100%;
  border: 2px 2px 2px 2px;
  border-left:solid 2px #000000;
  padding:10px;
  overflow:hidden;
}
    </style>
    <body>

      <div id="choose_div">
        <ul>
          <li class="li_choose">
            <div class="li_div">
              <p>Save</p>
                <img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
                 </div>
          </li>
        </ul>
      </div>

    <div id="frame_div">
      <iframe id="frame_opened">
    </div>

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50189

This is the normal way to do what you ask, using float:left;. There were a few other issues with your styles though:

  • You were targetting .choose_div the class (.), not the id (#)
  • You need to use box-sizing:border-box when you're doing this otherwise the padding and border is added on top of width:20% making the width larger than 20%.

jsFiddle

#choose_div {
    width: 20%;
    height: auto;
    padding: 1px;
    border: 2px;
    float:left;
    box-sizing:border-box;
}
#frame_div {
    height: auto;
    width: 80%;
    border: 2px 2px 2px 2px;
    float:left;
    box-sizing:border-box;
}

As for left and right, they can be used to align to a particular side of the screen if using position:absolute. position:relative simply shifts the element a particular amount, for example left:2px would shift the element 2 pixels to the left.

position:absolute positions the element on its closest ancestor that has a position of non-static. Then left/right/top/bottom can be used to indicate the sides of the ancestor.

Upvotes: 1

zkanoca
zkanoca

Reputation: 9918

for the div which to be shown write:

float:left

And for the right one:

float:right

<style>
#choose_div{
  width: 20%;
  height: auto;
  padding: 1px;
  left: 0px;
  border: 2px;
  float:left;

}
#frame_div{
  float:right;
  right:0px;
  height: auto;
  width: 80%;
  border: 2px 2px 2px 2px;
  position: relative;
}
</style>

If you add borders you must shrink your divs' witdh. Or they overflows the parent section and seen top-bottom.

Upvotes: 1

Related Questions