how to make right DIV the same height as the rest of page

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

Jason_C
New php-forum User
New php-forum User
Posts: 30
Joined: Sat Nov 18, 2006 7:32 am

how to make right DIV the same height as the rest of page

Postby Jason_C » Thu Apr 26, 2012 5:01 am

I have been trying for over a week now and asked around but know one seems to know how I fix this one.

I a left, middle and right DIV, but the right one does not show at 100% like the left one does.

What do I change so it is the same height?

Without using Javascript.

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="background-color: #ddd; height: 100%;">





<div id="outer" style="background-color: lightblue; margin: 0 auto; width: 600px; height: 100%; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">

<div id="head" style="background-color: #56D1AC; margin: 0 auto; width: 600px; text-align: center; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">
head
</div>

<div id="left" style="background-color: #56D1AC; float: left; margin: 0 auto; width: 100px; height: 100%; text-align: center;">
left<br><br>more text<br><br>more text<br><br>more text<br><br>more text<br><br>more text
</div>


<div id="mid" style="background-color: lightblue; float: left; margin: 0 auto; width: 400px; height: 100%; text-align: center; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">
mid<br><br>more text
</div>


<div id="right" style="background-color: #56D1AC; float: left; margin: 0 auto; width: 100px; height: 100%; text-align: center;">
right<br><br>more text
</div>

<br clear="all">


<div style="background-color: #ddd; text-align: center;">footer</div>

</div>





</body>
</html>

User avatar
minimihi
New php-forum User
New php-forum User
Posts: 238
Joined: Sat Apr 14, 2012 11:57 am
Location: Vilnius, Lithuania

Re: how to make right DIV the same height as the rest of pag

Postby minimihi » Thu Apr 26, 2012 9:22 am

put

Code: Select all

style="height: 100%;"
on html element

Jason_C
New php-forum User
New php-forum User
Posts: 30
Joined: Sat Nov 18, 2006 7:32 am

Re: how to make right DIV the same height as the rest of pag

Postby Jason_C » Thu Apr 26, 2012 9:38 am

Yes I did do that but this made the whole page seem like it was 150% instead and the footer went below the screen view, even if there was no content in the divs.

I have created a better version of my test code to show content in the left and right to show that the center div never grows to the same height as the left and right divs.

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; }

.bodyContainer {
background-color: orange;         margin: 0em auto;   padding: 0em 0em 0em 0em;   
width: 71.875em;               height: 100%;
border-top-left-radius: 1.125em;   border-top-right-radius: 1.125em;
}

.menu {
background: green;            margin: 0em;      padding: 0.313em 0em 0.313em 0em;
border-top-left-radius: 1.125em;   border-top-right-radius: 1.125em;
text-align: center;               font-size: 1.1em;
}

.leftSidePanel {
background-color: orange;                        padding: 0.313em 0.625em 0em 0.625em;
float: left;
width: 8.835em;                  min-height: 43.75em;
}

.mainContent {
background-color: lightblue;      margin: 0em auto;   padding: 0.625em 0.625em 0.625em 0.625em;
width: 49.4em;                  height: 100%;      min-height: 43.438em;
border-left: 0.5em solid purple;      border-top: 0.3em solid purple;      border-right: 0.5em solid purple;
border-top-left-radius: 1.125em;   border-top-right-radius: 1.125em;
text-align: center;               float: left;
}

.formWrapper{
                           margin: 0em auto;   padding: 0em;
                           min-height: 43.375em;
text-align: left;
border-top-left-radius: 1.125em;   border-top-right-radius: 1.125em;
}

.rightSidePanel   {
background-color: orange;                        padding: 0.313em 0.713em 0em 0.313em;
float: right;
width: 8.835em;
min-height: 43.75em;

}

.footer {
background-color: #ddd;            margin: 0 auto;      padding: 1em 0em 0em 0em;
text-align: center;
font-size: 0.875em;
}

.clearfloat {
clear: both;
}
--></style>

</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">


   <!-- menu start -->
   <div class="menu">

      <div class="clearfloat"></div>

   </div>
<div class="clearfloat"></div>
   <!-- menu end -->

<div class="leftSidePanel">
<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
<!--
<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
-->
</div>

      <!-- mainContent start -->
      <div class="mainContent">

      <div class="formWrapper">

      <br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah

      </div>

      </div>
      <!-- mainContent end -->

   <div class="rightSidePanel">
   <br><br><br><br>blah<br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
   </div>

   <!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>








</div>
<!-- body container end -->

</body>
</html>

User avatar
JordanMRichards
New php-forum User
New php-forum User
Posts: 84
Joined: Mon Apr 23, 2012 7:43 am
Contact:

Re: how to make right DIV the same height as the rest of pag

Postby JordanMRichards » Thu Apr 26, 2012 10:39 am

Hmm this seems a tricky problem.

Make sure that there is no top margin? Like using margin-top:0px;
Also set the z-index:99; to make sure there is no blank header or anything blocking the top of the div.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
14 Year Old Programmer & Graphic Artist, Confident and Courageous
Image

Jason_C
New php-forum User
New php-forum User
Posts: 30
Joined: Sat Nov 18, 2006 7:32 am

Re: how to make right DIV the same height as the rest of pag

Postby Jason_C » Thu Apr 26, 2012 10:50 am

mmm..

I do have margin: 0em auto; and margin: 0em; but only to have the div centered and text centered.

z-index ? what is that, i shall google it, but dont know what i place this.

User avatar
JordanMRichards
New php-forum User
New php-forum User
Posts: 84
Joined: Mon Apr 23, 2012 7:43 am
Contact:

Re: how to make right DIV the same height as the rest of pag

Postby JordanMRichards » Thu Apr 26, 2012 11:09 am

Careful, make sure that margin is not holding the div shorter than it should be.

"z-index:" is to define the order in which the elements are displayed on the page.

For example

element 3 has a z-index of 3 and goes on top of all the others
element 2 has a z-index of 2 and goes below element 3
element 1 has a z-index of 1 and goes at the bottom.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
14 Year Old Programmer & Graphic Artist, Confident and Courageous
Image

Jason_C
New php-forum User
New php-forum User
Posts: 30
Joined: Sat Nov 18, 2006 7:32 am

Re: how to make right DIV the same height as the rest of pag

Postby Jason_C » Thu Apr 26, 2012 12:02 pm

ok i sort of understand that, but the divs are not in any order like that i think?

ok what i am after is three divs side by side all the same height, no matter what the divs content. be it that div one has 4 lines of text, div 2 have 8 lines of text and div 3 has 12 lines of text. all of them will be the same height and have different coloured backgrounds.

User avatar
minimihi
New php-forum User
New php-forum User
Posts: 238
Joined: Sat Apr 14, 2012 11:57 am
Location: Vilnius, Lithuania

Re: how to make right DIV the same height as the rest of pag

Postby minimihi » Thu Apr 26, 2012 1:01 pm

Jason_C wrote:footer went below the screen view

Simple.
You used 100% height on the div before footer, which are under same parent div.
To be more specific, left/right/center divs already had height of 100% (full browser web page view height) and then you added foote, which increased whole document height over 100%.

Jason_C wrote:margin: 0em auto; and margin: 0em;

these don't affect top and bottom, so they're fine

1st version with 100% height in html tag looked just what you want with Chrome. Same with 2nd sample without any changes :oops:
Sorry, I'm to lazy to install other browsers on this computer for more testing :yawn:


Return to “CSS”

Who is online

Users browsing this forum: No registered users and 1 guest

cron