Common Problem

S

sdchilderley

New Member
Messages
22
Reaction score
0
Points
0
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>
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
It's not hard.

HTML: 
<!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.
 
You must log in or register to reply here.
Top