[RESOLVED] Position sequence.

@JMRKERDec 07.2007

What is the proper syntax to put two <div> areas into a container <div> and have the container <div> horizontally centered on the page?

This is what I would like to do.

[code=php] // Page stuff before <div>’s occur /* …..|———|….. …..|====|====|….. …..| | |….. …..| | |….. …..|====|====|….. …..|———|….. */ // Rest of page [/code]

I have not been able to figure out the
position:relative, float:left and float:clear sequence.

Thanks for any help.

to post a comment

CSS

5 Comments(s) _↴

@JimmyPaddyDec 07.2007 — #This should work :::

[code=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>Layout12</title>
 <style type="text/css">
 <!--
 #container {
 width: 800px;
 margin:0 auto;
 }
 #div1 {
 background:#CCCCCC;
 }
 #div2 {
 background:#CCCCCC;
 }
 -->
 </style>
 </head>
 
 <body>
 <div id="container">
 <div id="div1">
 <p>LOTS OF TEXT HERE</p>
 <p>LOTS OF TEXT HERE</p>
 <p>LOTS OF TEXT HERE</p>
 <p>LOTS OF TEXT HERE</p>
 <p>LOTS OF TEXT HERE</p>
 </div>
 <div id="div1">
 <p>LOTS OF TEXT HERE</p>
 <p>LOTS OF TEXT HERE</p>
 <p>LOTS OF TEXT HERE</p>
 <p>LOTS OF TEXT HERE</p>
 <p>LOTS OF TEXT HERE</p>
 </div>
 </div>
 </body>
 </html>
 
 [/code]

@WebJoelDec 07.2007 — #another variation:
<!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=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; /*for compliant browsers*/

padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/

font:x-small Arial, Verdana, sans-serif;voice-family: ""}"";voice-family:inherit;font-size:small;/*for IE 5.5 */

font-size:100%; line-height:1.125em;}

html>body {font-size:small; height:auto;/* Assist IE6 and earlier, 100% height */

font-size: small; voice-family: ""}"";voice-family: inherit; font-size: medium}

/* Assist IE rendering height, keyword-font sizes, etc. */

#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/

* html #wrapper {height:100%;}/* and feed IE what it needs */

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica,

sans-serif; background-color:none;font-style:normal; font-variant:normal;

font-weight:normal; margin:14px 0 4px 10px;}

h1 {font-size: 1.60em;}

h2 {font-size: 1.50em;}

h3 {font-size: 1.40em;}

h4 {font-size: 1.30em;}

h5 {font-size: 1.26em;}

h6 {font-size: 1.20em;}/* Defined default Header sizes*/

</style>

</head>

<body>

<div id="wrapper" style="position:relative; width:704px; margin:20px auto; ">

<div style="width:702px; height:50px; border:1px solid black; margin-bottom:10px;">

<h1>Top bar</h1>

</div>

<div style="width:340px; height:auto; padding:10px 5px; border:1px dotted green; float:left;">

<h1>left column</h1>

<p>Add your content here</p>

<p>Add your content here</p>

<p>Add your content here</p>

<p>Add your content here</p>

<p>Add your content here</p>

<p>Add your content here</p>

</div>

<div style="width:340px; height:auto; padding:10px 5px; border:1px dotted red; border-left:0 none; float:left;">

<h1>right column</h1>

<p>Add your content here</p>

<p>Add your content here</p>

<p>Add your content here</p>

</div>

<div style="width:702px; height:50px; margin-top:10px; border:1px solid black;">

<h1>Bottom bar</h1>

</div>

</div>

</body>

</html>[/QUOTE]

@JMRKERauthorDec 08.2007 — #Thank you 'JimmyPaddy' and 'WebJoel' for your most welcome response.

I took a little code from each of your responses and came up with the following (the parts I can understand).

It is a lot better that my original attempt but I have several questions if either of you could answer for me.

1. Why does the 'div2' display not appear shifted to the right as commanded by the float:right?

2. Why are the border colors not red, green and blue?

a. Red appears as a single line at the start of the display.

b. The blue box appears to have the green box colors

3. Why are the two boxes (div1 and div2) not different colors as specified by the background:#CCBBAA and #AABBCC colors?

4. Why does the text after the 'container' <div> tag not appear as a new line after the <br /> or <p /> tag?

[code=php]
 <!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>Double Div Display</title>
 <style type="text/css">
 #container {
 width: 800px;
 margin:0 auto;
 border:1px solid red;
 }
 #div1 {
 float:left; 
 width:390px;
 height: auto;
 background:#AABBCC;
 border:1px solid green;
 }
 #div2 {
 float:right; 
 width:390px;
 height: auto;
 background:#CCBBAA;
 border:1px solid blue;
 }
 </style>
 </head>
 
 <body>
 <h1>Information shown Before Container</h1>
 <div id="container">
 
 <div id="div1">
 Information will go here in the format of a questions and possible responses to the question.
 <p />Format: Question<br />a. Response 1.<br />a. Response 2.<br />a. Response 3.
 </div>
 
 <div id="div1">
 Information here will be the correct response along with explainations as to why correct
 and reasons why other responses were incorrect.
 </div>
 
 </div>
 <br />
 <h1>Rest of site stuff After Container</h1>
 </body>
 </html>
 [/code]

Obviously, I'm still a novice at this CSS stuff, but it's starting to make more sense.

Thank to both of you. ?

@CentauriDec 08.2007 — #You named the second div "div1" instead of "div2"

A container will not surround floated children (as floats are taken out of the document flow) unless told to do so. The overflow property can be used to achieve this :

[CODE]#container {
 width: 800px;
 margin:0 auto;
 border:1px solid red;
 [COLOR="Red"]overflow: hidden;[/COLOR]
 } [/CODE]

@JMRKERauthorDec 08.2007 — #Thank you 'Centauri'. ?

div tag mistake --> poor typing skills -->> bad eyesight -->>> stupid error! :o

overflow:hidden --> magic command -->> knowledge imparted

-->>> Thank you to all who offered code and help!!! ?

Also in #CSS _↴

a:link a:hover - using !important not working in FF CSS get text to not touch sides without indent and such?position layout center

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Position sequence.

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Position sequence.

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴