Div within a div? Title placeholder

Discussion in 'CSS' started by cluongo18, Jan 20, 2011.

0
  1. #1
    On my little design im doing I created the div for my content boxes, but I need a div within the content div to hold the title text within the content box div. (my h1's)

    How would I go about doing this?

    <!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>Untitled Document</title>
<style type="text/css">
body {
	background-color: #946833;
	margin: 0px auto;
	text-align: center;
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 48pt;
	color: #946833;
	font-weight: bolder;
	text-transform: uppercase;
}

p {
	padding-left: 4px;
	padding-right: 4px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: normal;
	line-height: 1.5em;
}

#container {
	width: 960px;
	margin: 0px auto;
	background-color: #f9cb00;
	height: 100%;
}

#header {
background-color: #600;
padding: 20px;
}

#box {
	background-color: #f0dfa6;
	border-style: solid;
	border-color: #a87b29;
	border-width: 3px;
	margin: 2px 240px 5px 240px;
}




</style>
</head>

<body>
<div id="container">

<div id="header"> 
<h1> Welcome to my website</h1>
</div>  

<div id="box">
<h1>Title</h1>

<p>Hello this is a css test post about my website. Im trying to get this stupid
fucking thing to work but it doesnt seem to want to. What will i do? Fuck if I know.
Im getting really sick of this CSS bullshit. No really though. Im about to go fucking
insane if I dont figure it the fuck out.</p>
</div>

<br />

<div id="box">
<h1>Title</h1>

<p>Hello this is a css test post about my website. Im trying to get this stupid
fucking thing to work but it doesnt seem to want to. What will i do? Fuck if I know.
Im getting really sick of this CSS bullshit. No really though. Im about to go fucking
insane if I dont figure it the fuck out.</p>
</div>

<br />

<div id="box">
<h1>Title</h1>
<p>Hello this is a css test post about my website. Im trying to get this stupid
fucking thing to work but it doesnt seem to want to. What will i do? Fuck if I know.
Im getting really sick of this CSS bullshit. No really though. Im about to go fucking
insane if I dont figure it the fuck out.</p>
</div>
  
  
  
</div>
</body>
</html>
    Code (markup):

     
    cluongo18, Jan 20, 2011 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm a bit confused what you're trying to achieve. Please explain in more detail. Have you tried using floats?
     
    GWiz, Jan 20, 2011 IP
  3. cluongo18

    cluongo18 Member

    Messages:
    855
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #3
    Basically have a content box. In the content box I want a Title and then the content text. But I want the title be set at the top of the content box in a fixed position.
     
    cluongo18, Jan 20, 2011 IP
  4. davmillar

    davmillar Peon

    Messages:
    12
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Can you explain what you mean by fixed position? Do you mean specifically placed using absolute positioning? Maybe drawing a quick mockup in MS Paint could help us understand better.

    Also, you should not have several elements with the same ID as your example code does. Elements should have a unique ID. If you planned to assign them all the same ID for CSS purposes, you'll want to use classes instead. (Use "class='box'" instead of "id='box'" and replace #box with .box in your CSS.)
     
    davmillar, Jan 21, 2011 IP