Want to include two side-by-side divs within a div.

Page 1 of 1

2 Replies - 412 Views - Last Post: 22 January 2013 - 09:55 AM

#1 anonymoususercleveland  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 10-January 13

Want to include two side-by-side divs within a div.

Posted 10 January 2013 - 12:12 PM

I'm a total beginner. I've taken an on-line class in html and css, and am stuck. I've searched and found topics that seem like they would help, but got nowhere.

This is my first attempt at creating a website ever. I like websites where the content (in divs) appears to be in one centered box on a page. Sort of like a "frame", but I've learned that's a whole 'nother concept. I don't want to use a WYSIWYG program to do this so that I can understand what to do.

With regards to my code sample, my goal is to have the divs that begin with "1" through "6" appear inside the div "I".

Can someone toss some hints my way?

Thanks, Will (Cleveland,OH)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<style>

body {
color : blue;
background-color: lightblue;
font-family:Tahoma, Geneva, sans-serif;
}

#wrapper {
padding:5px;
background-color:yellow;
float: left;
width: 95%;
height: 95%;
border-style:solid;
border-color:black;
border-width:5px;
border-radius:25px;
}

#header {
padding:5px;
background-color:white;
float: left;
width: 85%;
border-style:solid;
border-color:black;
border-width:5px;
border-radius:25px;
}

#lefttopdiv {
padding:5px;
background-color:orange;
float: left;
width: 40%;
border-style:solid;
border-color:black;
border-width:5px;
border-radius:25px;
}

#righttopdiv {
padding:5px;
background-color:white;
float: right;
width: 40%;
border-style:solid;
border-color:black;
border-width:5px;
border-radius:25px;
}

#leftbottomdiv {
padding:5px;
background-color:white;
float: left;
width: 40%;
border-style:solid;
border-color:black;
border-width:5px;
border-radius:25px;
}

#rightbottomdiv {
padding:5px;
background-color:orange;
float: right;
width: 40%;
border-style:solid;
border-color:black;
border-width:5px;
border-radius:25px;
}

#footer {
padding:5px;
background-color:yellow;
float: left;
width: 80%;
border-style:solid;
border-color:black;
border-width:5px;
border-radius:25px;
}

</style>


	<div id="wrapper">
	<h3>
	I Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
	</h3>
	
	</div>	<div id="header">
	<h3>
	1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet mi lacus. 
	</h3>		
	</div>

	
	<div id="lefttopdiv">
	<h3>
	2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet mi lacus. Maecenas malesuada dui a tellus eleifend dapibus. Vivamus non elit mi, vitae eleifend ligula. Integer vel orci odio. 
	</h3>
	</div>
	
	
	<div id="righttopdiv">
	<h3>
	3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet mi lacus. Maecenas malesuada dui a tellus eleifend dapibus. Vivamus non elit mi, vitae eleifend ligula. Integer vel orci odio. 
	</h3>		
	</div>
	
	<div id="leftbottomdiv">
	<h3>
	4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet mi lacus. Maecenas malesuada dui a tellus eleifend dapibus. Vivamus non elit mi, vitae eleifend ligula. Integer vel orci odio.
	</h3>
	</div>
	
	
	<div id="rightbottomdiv">
	<h3>
	5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet mi lacus. Maecenas malesuada dui a tellus eleifend dapibus. Vivamus non elit mi, vitae eleifend ligula. Integer vel orci odio. 
	</h3>		
	</div>
	
	<div id="footer">
	<h3>
	6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet mi lacus. Maecenas malesuada dui a tellus eleifend dapibus. Vivamus non elit mi, vitae eleifend ligula. Integer vel orci odio. 
	</h3>		
	</div>

</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Want to include two side-by-side divs within a div.

#2 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1085
  • View blog
  • Posts: 3,390
  • Joined: 12-December 12

Re: Want to include two side-by-side divs within a div.

Posted 10 January 2013 - 12:28 PM

Quote

my goal is to have the divs that begin with "1" through "6" appear inside the div "I".


This doesn't correspond to your code.. You have 7 divs but none of them are nested. So the first thing to do is nest the ones you want to appear inside another div - the wrapper div.

You require <html> <head> <title> and <body> tags and it is:

<style type="text/css">

This post has been edited by andrewsw: 10 January 2013 - 12:30 PM

Was This Post Helpful? 0
  • +
  • -

#3 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 25
  • View blog
  • Posts: 106
  • Joined: 12-November 12

Re: Want to include two side-by-side divs within a div.

Posted 22 January 2013 - 09:55 AM

If you nest your div's as per andrewsw's suggestion your layout will work fine. As far as tips and tricks, I would suggest checking out the box-model concept and try different layouts using the position attribute instead of relying exclusively on floats. To center most things in css you can use margin to trick the browser into centering it for you.
margin: 0 auto;

What this does is apply a 0px margin on the top and bottom of the div and auto the left and right. Auto basically divides the space in half, effectively centering the element. A good practice is to use a container div or wrapper as you have it, with a center class nested into it like so:
#wrapper { 
  width: 100%;
  margin: 0 auto;
}
.center {
  width: 960px;
  margin: 0 auto;
}

<div id="wrapper">
  <div class="center">
     content
  </div>
</div>


Setting the center class width element to 960px is good practice, since the majority of screen resolutions are 1024x768. This ensures the div's and page elements are centered on the users screen. That should be enough to get you started. Your new best friend should be W3 Schools for any syntax and standard practices.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1