div boxes next to each other

hanzi · #1 (**permalink**) 01-16-09, 08:15 AM

Hi

I'm struggling to get two boxes next to each other horizontally, The left hand side has the content and the right hand side is just a box with a animated gif or something (haven't decided yet).

Can someone point me into the right direction please

HTML

HTML Code:

</head>

<body>
<div id="wrapper">
   	  <div id="header"></div>
      <div>
      	<ul id="maintab" class="basictab">
			<li class="selected"><a href="#">HOME</a></li>
			<li><a href="etd.html">ETD</a></li>
			<li rel="trainingS"><a href="#">TRAINING SERVICES &#9660</a></li>
            <li><a href="conference.html">CONFERENCE FACILITES</a></li>
			<li rel="community"><a href="#">COMMUNITY &#9660</a></li>
            <li><a href="bee.html">BEE</a></li>
            <li><a href="register.html">REGISTER</a></li>
            <li><a href="contact.html">CONTACT US</a></li>
		</ul>

		<div id="trainingS" class="submenustyle">
			<a href="rpl.html">RPL</a>
			<a href="course_s.html">Course Schedule</a>
            <a href="training_m.html">Training Material</a>
            <a href="course_reports.html">Course Report</a>
            <a href="course_results.html">Course Results</a>
		</div>
        
  		<div id="community" class="submenustyle">
        	<a href="save_n.html">Save the Nation</a>
            <a href="funnies.html">Funnies</a>
            <a href="team.html">Mentornet Team</a>
            <a href="gallery.html">Photo Gallery</a>
        </div>     

<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script></div>
<br />
<br />
      <div id="content">
      		<div class="block1">What's New...
            	<span><p>Welcome to our NEW website, a couple of things have changed on the site, you will find
            			that the stucture of our new home has remained the same although the navigation is
                    	 a bit easier. Please feel free to leave us a <a href="contact.html">comment</a> and tell 
                    	 us what you think of the new look.</p>
                   	 <p>Any new information about Mentornet and any future developments will be posted in this
                   		 block. Also any and all downloads that are available to the public.</p>
                    <p><big>NEW:</big>&nbsp;<a href="files/Courseschedule09.pdf" target="_blank">Course Schedule for 2009</a></p>
                    <p>Have a look at our <a href="files/TrainingDirectory09.pdf" target="_blank">Training Directory for 2009</a></p>
                    <p>Learn more about the <a href="files/DLP.pdf" target="_blank">Mentornet Distance Learning Process</a></p>
                </span>
            </div>
            <br />
            <div class="block2">Overview of Mentornet...
                <div><p>Mentornet has positioned itself in the Education, Training and Development (ETD) industry as a
                    		business college specializing in ETD training.</p>
                         <p><ul>We offer: <li>National Qualifications</li>
                         				  <li>Various Part Qualifications</li>
                                          <li>Short Courses</li>
                                          <li>and a range of ETD and HRD related services.</li>
                            </ul></p><br />
                            Vision...
                            <p>Mentornet is the leading accredited provider of full and part ETD qualifications based
                            	on National Qualifications Framework (NQF) standards, to individual practitioners and
                                organisations in South Africa</p>
                </div>               	
            </div><br />
            <div class="block3">Lecturers / Facilitators...
            	<div><p>Mentornet facilitators are well-qualified and experienced in learning programme design and development,
                		facilitation, assessment and moderation in their respective fields of expertise. The NQF requirements
                        that facilitators must be qualified at least one level higher than the level of the course offered, is
                        strictly adhered to.</p>
              </div><br />
                 Mission Statement...
                 <div><p>Mentornet provides full and part qualifications in ETD to individuals and organisations engaged in ETD
                 		 in order to provide competent practitioners able to meet the growing needs of outcomes-based learning,
                         skills development and human resources development in South Africa.</p>
                 </div>                 
            </div>
      </div>
</div>
</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */
body 
{
	margin: 0;
	padding: 0;
	background-color: #333333
}

h4
{
	color: #000000;
}

/*//////////////////////////////////////////////////////////////Wrapper styling*/
#wrapper 
{
	height: 100%;
	width: 800px;
	left: auto;
	top: 0px;
	right: auto;
	bottom: 0px;
	margin: 0px auto;
	padding-top: 0px;
	padding-bottom: 15px;
	color: #FFFFFF;
	background-color: #FFFFFF;
}

/*//////////////////////////////////////////////////////////////Header styling*/
#header 
{
	background-image: url(images/bkgrnd.png);
	background-repeat: no-repeat;
	height: 220px;
	width: 800px;
	margin: 0px auto;
	top: 0px;
}

/*//////////////////////////////////////////////////////////////Content styling*/
#content 
{
	padding: 8px 15px;
	border-left: 1px solid #666;
	border-top: 1px solid #666;
	border-bottom: 1px solid #333;
	border-right: 1px solid #333;
	width: 90%;
	margin: auto;
	background-color: #999999;
	background-image: url(images/contRep.PNG);
	background-repeat: repeat-x;
}

/*//////////////////////////////////////////////////////////////Block 1 styling*/
.block1
{
	width: 75%;
	border: solid 1px #000000;
	color: #333333;
	font: sans-serif;
	font-weight: bolder;
	font-size: 18px;
	text-decoration: none;
	padding: 10px;
	background-image: url(images/backRep.png);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	margin: 14px 0px 0px 10px;
}

.block1 p
{
	font: sans-serif;
	font-size: 14px;
	color: #000000;
	text-decoration: none;
	text-align: justify;
}

.block1 a
{
	text-decoration: underline;
	color: #666666;
}

.block1 a:hover
{
	color: #009900;
}

/*//////////////////////////////////////////////////////////////Block 2 styling*/
.block2
{
	width: 75%;
	border: solid 1px #000000;
	color: #333333;
	font: sans-serif;
	font-weight: bolder;
	font-size: 18px;
	text-decoration: none;
	padding: 10px;
	margin-left: 155px;
	background-image: url(images/backRep.png);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
}

.block2 p
{
	font: sans-serif;
	font-size: 14px;
	color: #000000;
	text-decoration: none;
	text-align: justify;
}

.block2 a
{
	text-decoration: underline;
	color: #666666;
}

.block2 a:hover
{
	color: #009900;
}

.block2 ul
{
	font-size: 14px;
}

/*//////////////////////////////////////////////////////////////Block 3 styling*/
.block3
{
	width: 75%;
	border: solid 1px #000000;
	color: #333333;
	font: sans-serif;
	font-weight: bolder;
	font-size: 18px;
	text-decoration: none;
	padding: 10px;
	background-image: url(images/backRep.png);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	margin: auto auto 14px 10px;
}

.block3 p
{
	font: sans-serif;
	font-size: 14px;
	color: #000000;
	text-decoration: none;
	text-align: justify;
}

.block3 a
{
	text-decoration: underline;
	color: #666666;
}

.block3 a:hover
{
	color: #009900;
}

I uploaded a picture if my question isn't making any sense.

Nico · #2 (**permalink**) 01-16-09, 08:25 AM

Use float.

HTML Code:

<div id="right" style="float: right;">Right</div>

<div id="left">Left</div>

hanzi · #3 (**permalink**) 01-16-09, 08:46 AM

cool I just gave it a go but as soon as I float everything it escapes from the content area (which expands as I add content). What I mean is, the boxes float outside of my wrapper and content <div> tags.....

sorry I can't explain myself well enough today...here is another pic

Yeroon · #4 (**permalink**) 01-16-09, 09:13 AM

You need to set the width of the floating divs:

Code:

<div>
	<div id="left" style="float:left;width:80%;">What's New...
		left
	</div>
	<div id="right" style="float: right;width:20%;">
		right
	</div>
</div>

End User · #5 (**permalink**) 01-16-09, 10:01 AM

I suggest you give up and use tables.

Nico · #6 (**permalink**) 01-16-09, 10:19 AM

^ I managed to solve it under 47 minutes.

Quote:

Originally Posted by hanzi

cool I just gave it a go but as soon as I float everything it escapes from the content area (which expands as I add content). What I mean is, the boxes float outside of my wrapper and content <div> tags.....

Actually, I've had exactly the same problem earlier today. Here's how I solved it:

HTML:
http://projects.nicoswd.com/gartenteich/

CSS:
http://projects.nicoswd.com/gartente...ult/styles.css

There are 3 (main) DIVs: wrapper, navigation, and content.

"Content" and "navigation" are inside "wrapper", which is basically the same case as yours. Now take a look at the corresponding style definitions in the style sheet. (I'm too lazy to puzzle out the pieces right now.

)