Current location: Hot Scripts Forums » General Web Coding » CSS » div boxes next to each other


div boxes next to each other

Reply
  #1 (permalink)  
Old 01-16-09, 08:15 AM
hanzi's Avatar
hanzi hanzi is offline
Newbie Coder
 
Join Date: Aug 2008
Location: South Africa
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
div boxes next to each other

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.
Attached Images
File Type: jpg site.jpg (58.4 KB, 527 views)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 01-16-09, 08:25 AM
Nico's Avatar
Nico Nico is offline
Community Leader
 
Join Date: Sep 2005
Location: Spain
Posts: 8,074
Thanks: 11
Thanked 88 Times in 83 Posts
Use float.
HTML Code:
<div id="right" style="float: right;">Right</div>

<div id="left">Left</div>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #3 (permalink)  
Old 01-16-09, 08:46 AM
hanzi's Avatar
hanzi hanzi is offline
Newbie Coder
 
Join Date: Aug 2008
Location: South Africa
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
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
Attached Images
File Type: jpg site.jpg (52.4 KB, 524 views)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #4 (permalink)  
Old 01-16-09, 09:13 AM
Yeroon's Avatar
Yeroon Yeroon is offline
Code Master
 
Join Date: Aug 2007
Location: Netherlands, Nijmegen
Posts: 850
Thanks: 2
Thanked 20 Times in 20 Posts
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>
__________________
Feel free to thank people if they help you by clicking thanks at a post.
=================================
Make it idiot proof and someone will make a better idiot.
=================================
Realise the impotence of proof reading everything you publish
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #5 (permalink)  
Old 01-16-09, 10:01 AM
End User's Avatar
End User End User is offline
Level II Curmudgeon
 
Join Date: Dec 2004
Posts: 3,027
Thanks: 14
Thanked 35 Times in 33 Posts
I suggest you give up and use tables.
__________________
I don't live on the edge, but sometimes I go there to visit.
-------------------------------------------------------------------------
Sanitize Your Data | Oracle Date & Substring Functions | Code Snippet Library | [url=http://www.codmb.com/Call Of Duty[/url]
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #6 (permalink)  
Old 01-16-09, 10:19 AM
Nico's Avatar
Nico Nico is offline
Community Leader
 
Join Date: Sep 2005
Location: Spain
Posts: 8,074
Thanks: 11
Thanked 88 Times in 83 Posts
^ I managed to solve it under 47 minutes.

Quote:
Originally Posted by hanzi View Post
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. )
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
div css theighost CSS 11 09-14-08 03:30 AM
Drop down boxes going behind content DIV xavier039 CSS 13 07-27-08 05:19 PM
[SOLVED] delay on html element properties? UnrealEd JavaScript 5 05-05-08 04:23 AM
[SOLVED] Change content in a DIV with links in another DIV s1yfa JavaScript 3 05-04-08 05:10 AM
Can't Understand java script maverickminds JavaScript 1 07-16-06 02:23 PM


All times are GMT -5. The time now is 06:35 AM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.