Common Problem

**sdchilderley** · 12-13-2009 03:55 PM

what i want to do, the container would normaly expand if "position:absolute" was not on the content boxs.

But i need the content boxs positioned at exactly that and if i remove position absolute, the content boxs will all default to one position top right corner, therefore i have no control over there position...

At the same time i need control over there positions but if theres more data in the bottom left box, it needs to expand the container aswell as itself... understand?

The CSS

Code:

@charset "utf-8";
/* CSS Document */

body {
margin:0px;
padding:0px;
text-align:center;


}.container {
    margin: 0 auto;
    border: thin solid #FF0000;
width:400px;

}.contentbox1 {
    position:absolute;
    right:325px;
    width:117px;
    top:125px;
    border: thin solid #00FF00;
    height: 119px;


}.contentbox2 {
    position:absolute;
    right:450px;
    width:120px;
    top:125px;
    border: thin solid #00FF00;
    height: 118px;


}.contentbox3 {
    position:absolute;
    right:326px;
    width:116px;
    top:8px;
    border: thin solid #00FF00;
    height: 108px;


}.contentbox4 {
    position:absolute;
    right:451px;
    width:119px;
    top:8px;
    border: thin solid #00FF00;
    height: 107px;


}

The HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aboutghosts Example</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
</head>

<body>


<div class="container">


<div class="contentbox1">content box 4</div>
<div class="contentbox2">
  <p>content box 3</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Tons of comments here in content box 3</p>
</div>
<div class="contentbox3">content box 2</div>
<div class="contentbox4">content box 1</div>


</div>



</body>
</html>

**misson** · 12-13-2009 04:43 PM

Absolutely positioned elements are taken out of the normal flow and never used to calculate the height of an ancestor. If you don't want that behavior, don't use absolute positioning. Instead, use elastic layout techniques, such as floating the elements and setting "overflow" on the parent (or some other method of auto-clearing the floats).

**sdchilderley** · 12-13-2009 05:04 PM

Thats 2 confusing i think ill just skip it... unless anyone else has anything

**misson** · 12-13-2009 05:36 PM

It's not hard.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aboutghosts Example</title>
    <link rel="stylesheet" type="text/css" href="css/default.css">
  </head>
  <body>
    <div class="container">
      <div id="Foo" class="contentbox">content box 3</div>
      <div id="Bar" class="contentbox">content box 4</div>
      <div id="Baz" class="contentbox">content box 1</div>
      <div id="Comments"  class="contentbox">
        <p>content box 2</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>Tons of comments here</p>
      </div>
    </div>
  </body>
</html>

If you want to give something a unique name, use the "id" attribute, not "class". "Comments" was the only element with an obvious name; the others currently have stand-in names. You want to use something descriptive of what the element is.

default.css:

Code:

.container {
    overflow: auto;
}
.contentbox {
    float: right;
}
#Foo, #Baz {
    width: 5em;
}
#Bar, #Comments {
    width: 10em;
}
#Baz {
    clear: both;
}

Note the use of ems rather than px.

Thread: Common Problem

LinkBack

Thread Tools

Display

Common Problem

Re: Common Problem

Re: Common Problem

Re: Common Problem

Similar Threads

A problem with certificate

DB number problem

Problem uploading image (GD library problem)

Ad code problem!

Posting Permissions