?
Solved

Unwanted whitespace below realtive positioned Div

Posted on 2005-04-25
12
Medium Priority
?
416 Views
Last Modified: 2011-08-18
I have a table which i'm using div tags in. I have some on the left, and I have one for the right column. The Div tag is below. It seems to be positioned good, but the problem I'm having is that it's creating about 400 pixels of whitespace below it. I need it to be at the top, but any idea how I can avoid the whitespace it's creating?

Thanks!

#main {
      position:relative;
      visibility: visible;
      height:400px;
      width:319px;
      border: 1px dashed black;
      padding: 4px;
      overflow: scroll;
      left: 0;
      top: -361;
      float:right;
      }
0
Comment
Question by:gregca80
  • 7
  • 5
12 Comments
 
LVL 2

Expert Comment

by:cwcrogan
ID: 13860794
You're moving the div up 361px up from it's normal position (relative position), doing this reserves it's space in the flow and hence the whitespace. One way to do what you want is to use absolute postioning, but that could lead to other problems. Can you post the code or a link so that we can better understand what you're trying to accomplish. There may be another way of laying this out.
0
 

Author Comment

by:gregca80
ID: 13860940
I'll explain a little better what I have going on ( or at least i'll try.) I'm using a table and I have it split into two columns. (there are other td's that I have omitted to make this more clear, but not related to this problem.) The part i'm trying to get these DIV tag situated in is the td with the width of 80%. I just wanted a way to position these DIVs inside this td, so they wouldn't shift around when the window size changes. I've posted my html/css code below. My main goal is to have what I already have, except the whitespace which I mentioned earlier.

Any ideas and suggestions would be great!

Here is my HTML Code:


<table  width="800" border="0" align="center" cellpadding="0">
<tr>
<td class="Main" width="80%">
   
      <!--- MAIN BODY OF WEBPAGE -->
            
      <div class="tableheading">
      News:
      </div>
      <div id="news">
            <div id="inner">
            <h1>
                                 Some Information Here
            </div>
                 </div>
      <br>
      
      <div class="tableheading">
      Heading Here:
      </div>
            <div id="message">
            Information Here
            </div>
      
      
      <div class="maintableheading">
      Information:
      </div>
      <div id="main">
                Information Goes Here
                </div>
                <!-- END MAIN BODY -->
<td valign="top" class="sidebar" width="20%">
</td>
</tr>


CSS CODE:

#news {
     position:relative;
     visibility: visible;
     height: 150px;
     width: 319px;
     padding-top: 100px;
     border: 1px dashed black;
     overflow: hidden;
       }

#inner {
    position: relative;
    height: 150px;
    width: 319px;
      padding:4px;
      }

#main {
      position:relative;
      visibility: visible;
      height:400px;
      width:319px;
      border: 1px dashed black;
      padding: 4px;
      overflow: scroll;
      left: 0;
      top: -361;
      float:right;
      }
      
#message {
      position:relative;
      visibility: visible;
      height:150;
      width:319px;
      border: 1px dashed black;
      padding: 4px;
      
      overflow: scroll;
}


.tableheading {
      position:relative;
      visibility:visible;
      height: 15px;
      width: 319px;
      border: 2px solid black;
      color:#FFFFFF;
      text-align: left;
      font-weight:bold;
      background-color:#999999;
      padding: 2px;
      margin-bottom: 3px;
      }

.maintableheading {
      position:relative;
      visibility:visible;
      height: 15px;
      width: 319px;
      border: 2px solid black;
      color:#FFFFFF;
      text-align: left;
      font-weight:bold;
      background-color:#999999;
      padding: 2px;
      margin-bottom: 3px;
      left: 350px;
      top: -361px;
      }            
      
0
 
LVL 2

Expert Comment

by:cwcrogan
ID: 13861138
Okay, here are some comments. I can almost guarantee this whole page could be better laid out all CSS than with the table - but that may be another topic all together. Have you tried filling the divisions above the #main with content? Do you realize that you're moving the #main division up and it will actually cover the divisions above it?

Now to correct the whitespace - remove the top: -361px from the #main declaration. That will eliminate the whitespace that was beneath it, but will probably show some above it. The space above it is from the divisions above (unless they're filled with content). You have a slight case of divitis - it appears you're creating too many divs unnecessarily. Wouldn't the tableheading and maintableheading be more semantic with <hx> tags? Also you can reduce you're CSS by using the cascade and inheritance. You don't need to declare visibility: visible; and you don't need position: relative on every class and id unless you're doing some moving of the elements (which you don't need to do). In the message id you need to specify unit of height (probably px). I'd also be willing to bet you probably don't need the height and width dimensions on every class and id as well.

Can you provide a link? or a link to screenshot? or show an ascii representation?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 2

Expert Comment

by:cwcrogan
ID: 13861353
All the divisions before the #main div add up to 490px of space. Maybe you're not familiar with the box model. The tableheading class is 26px high (2px border + 2px padding + 15px content + 2px padding + 2px border + 3px margin-bottom). The news id is 252px high (1px border + 100px top-padding + 150px content + 1px border). And so on... Is this the cause for you wanting to move the main division up? Have you accidentally created too much space above?
0
 

Author Comment

by:gregca80
ID: 13861397
Do you realize that you're moving the #main division up and it will actually cover the divisions above it?

I have {float: right} on #main, which makes the DIV go to the right, instead of            covering the divisions above it. The effect I'm trying to get is two separate columns.

Now to correct the whitespace - remove the top: -361px from the #main declaration.

If I remove this, the DIV will no longer be positioned at the top of the table.

I already have the DIV tags filled with content, but i just removed from this code to make it easier to read. I agree that the entire thing would be better in CSS, but all of the other elements of the site are in tables right now. Like the navigation bar, and whatnot. Eventually I'll probably try to do it all CSS, but for now I was hoping to just get this working. I'm by no means an expert in CSS, but I'm learning more and more. The page is on a private wan/intranet, so I can't really provide a link to it.
0
 
LVL 2

Expert Comment

by:cwcrogan
ID: 13861676
my bad - i missed the float. The space reservation still holds true though - you're floating right after the previous content so it's displayed below the content and to the right. You've corrected the positioning with top:-361px but it's naturally occuring space is still reserved. Can you change the order of the html? If the #main div where listed first in the document, you'd get the results you want. Or, you could not float the main div and float: left the ones before. Another option would be to change main's position to absolute, remove the float, change top to 0 and add right: 0;.
0
 

Author Comment

by:gregca80
ID: 13861687
I'm doing a little experimenting right now. I'll let you know what I come up with.
0
 
LVL 2

Expert Comment

by:cwcrogan
ID: 13862154
I found another problem with your CSS above. the two columns are too wide. The td is 640px wide (80% of 800). The main division is 329px wide and the other column is also 329px wide, together totalling 658px. Too wide for both columns to fit into the 640px wide td.

Here's an example of the page without tables. I've accounted for the 20%column from the table which I assumed was navigation. This doesn't account for any footer though.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>test page</title>
<style type="text/css">

#page {
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
    }
#contentarea {
    width: 640px;
    float: left;
    }
#maincontent {
    width: 310px;
    padding: 4px;
    border: 1px dashed black;
    float: right;
    }
#newscolumn {
    width: 310px;
    padding: 4px;
    border: 1px dashed black;
    }
#nav {
    width: 150px;
    padding: 4px;
    border: 1px solid black;
    margin-left: 640px;
    }
</style>
</head>
<body>
   
<div id="page">

<div id="contentarea">

  <div id="maincontent">
    <h2>Information:</h2>
    <p>Information goes here</p>
  </div>

  <div id="newscolumn">
    <h2>News:</h2>
    <h3>News Topic</h3>
    <p>News information here</p>
   
    <h3>Another heading</h3>
    <p>more information here</p>
  </div>
</div>

<div id="nav">
  <h3>Navigation</h3>
  <ul>
    <li><a href="#">First link</a></li>
    <li><a href="#">Second link</a></li>
    <li><a href="#">Third link</a></li>
  </ul>
</div>

</div>
</body>
</html>
0
 

Author Comment

by:gregca80
ID: 13862590
I finally got this working. I made a little mock up on a separate page that really helped me. Similar to what you said. I made everything float left, and the things on the right, to float right of course.

Now everything is positioned perfect, and I don't have to mess with that Top attribute.

I'm curious about one thing, Is there an easier way to create my headers than how i'm doing it? Or is this the way to go?

Goes like this:

<style type="text/css">

#div1header {
position: relative;
visibility:visible;
border:2px dashed black;
width: 200px;
height: 15px;
text-align:left;
float:left;
vertical-align:top;
padding: 2px;
margin-bottom: 5px;
}

#div2header {
position: relative;
visibility:visible;
border:2px dashed black;
width: 200px;
height: 15px;
text-align:left;
float:right;
vertical-align:top;
padding: 2px;
margin-bottom: 5px;
}

#div3header {
position: relative;
visibility:visible;
border:2px dashed black;
width: 200px;
height: 15px;
text-align:left;
float:left;
vertical-align:top;
padding: 2px;
margin-bottom: 5px;
}

#div1 {
position: relative;
visibility:visible;
border: 2px dashed black;
width: 200px;
height: 150px;
padding: 2px;
text-align:left;
float:left;
vertical-align:top;
margin-bottom: 5px;
}

#div2 {
position: relative;
visibility:visible;
border: 2px dashed black;
width: 200px;
height: 300px;
padding: 2px;
text-align:left;
float:right;
vertical-align:top;
}

#div3 {
position: relative;
visibility:visible;
border: 2px dashed black;
width: 200px;
height: 150px;
padding: 2px;
text-align:left;
float:left;
vertical-align:top;
}

</style>


</head>

<body>
<table align="center" width="500" align="top" border="1" cellpadding=10>
<tr>
<td>

<div id="div1header">
Heading 1
</div>

<div id="div2header">
Heading 2
</div>

<div id="div1">
This is the first element that I'm testing.
I hope it works okay. :)
</div>

<div id="div2">
This is the second element that I'm testing.
Lets see how it goes. :/
</div>

<div id="div3header">
Heading 3
</div>

<div id="div3">
This is the third installment
</div>

</tr>
</td>
</table>
0
 
LVL 2

Accepted Solution

by:
cwcrogan earned 240 total points
ID: 13863171
Yes, there is an easier way (and semantically correct way). Use <hx> tags for headers! That's what they're for. You should use divisions sparingly. They should be used for major section divisions (and smaller ones in certain cases). Like I mentioned earlier - you have a light case of divitis :)  Just place the headers within the divs. You can style them independently like this:

#div1 h2 {
    font: 1.8em normal georgia,times,serif;
    color: #9a2a1a;
    letter-spacing: -0.3em;
    background-color: #eee;
    }

as an example.
Also, you can lose the position: relative and visibility: visible; in all your declarations - they're not needed here. Also, if you float an item to the left (or right for that matter), you don't have to float the other content in the other direction. It will just naturally flow around the float. One more thing - the vertical-align doesn't work the same in CSS as it does in html tables. You can eliminate all those as well.
0
 

Author Comment

by:gregca80
ID: 13863380
Thanks for the information! Very good stuff to know. I really appreciate your help. CSS is fun.
0
 
LVL 2

Expert Comment

by:cwcrogan
ID: 13863568
Thank you for the A. I think you're doing a good job in learning CSS - experimentation is the best. Please remember that changing from tables to CSS layouts is not a direct conversion. You'll need to change your way of thinking a bit, but you're catching on quick.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month15 days, 15 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question