Solved

Two floated divs within another floated div?

Posted on 2012-04-06
6
2 solutions
278 Views
Last Modified: 2012-05-31
Below I have embeded a picture of how I want the finished page to look. Anything in black already exists on multiple pages, on a few of those, I will want to put the two red boxes at the bottom of the contentright2 div which is floated right in the content  div. Is there an easy way to do this without screwing with my code too much?

how-i-want-the-layout.pdf

Here is my existing css code for the relevant divs:

.wrapper {width: 100%; display: block; margin: 0; text-align: left;}

#content {
position: relative;
display: block;
line-height: 1.7em;
width: 940px;
padding: 10px 0;
margin: 0 auto;
/*-----edit. allows for the footer to remain at the bottom of the page so that it doesn't expand up if there isn't enough content to fill the page*/
min-height: 530px; }

.contentleft {
float: left;
width: 300px;
margin: 0 10px 0 0;}

.contentright2 {
float: right;
width: 620px;
margin: 0 0 0 10px;}

Open in new window

0
Comment
Question by:warsawtech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
6 Comments
 
LVL 9

Expert Comment

by:sevensnake77
ID: 37816075
add a display:block
0
 
LVL 2

Author Comment

by:warsawtech
ID: 37816136
I've attached my full html of one of the pages I'd like this done on.Under Contact the Assessor's Office towards the bottom I want the Mailing address with heading and <P> in one "column", the Real Estate in another column and Personal Property in another. I've also attached the full CSS...can you be a bit more specific on how I would go about using the display function?

Thanks.

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">

<!-- #BeginTemplate "../Templates/offices.dwt" -->

<head>
<!-- #BeginEditable "title" -->
<title>BENTON COUNTY, MO - Assessor</title>
<!-- #EndEditable -->
<!-- #BeginEditable "description" -->
<meta name="description" content="Benton County Assessor's Office" />
<!-- #EndEditable -->
<!--#BeginEditable "keywords" -->
<meta name="keywords" content="government, county, benton county, missouri, mo, truman lake, warsaw, benton county assessor, benton county circuit clerk, benton county collector, benton county coroner, benton county clerk, benton county commissioners, benton county emergency management, benton county prosecuting attorney, benton county public administrator, benton county recorder, benton county sheriff, benton county surveyor, benton county treasurer, benton county victim advocate, benton county central dispatch, benton county 911 addressing" />
<!-- #EndEditable -->
<meta http-equiv="imagetoolbar" content="false" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="../styles/style.css" />
<link rel="stylesheet" href="../styles/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="../styles/offices.css"  />
<script type="text/javascript" src="../Scripts/lightbox.js"></script>
<!-- 
*********************************
Design by: RTBWizards.com
Release Date: August 2010
*********************************
-->
</head>

<body>
<div class="wrapper row1">
<div id="global">
<!--webbot bot="Include" u-include="../Includes/global.html" tag="Body" -->
</div>
</div>

<div class="wrapper row2">
<div id="header">
<div id="logo">
<p class="sitename">BENTON COUNTY, MO</p>
<p class="slogan">316 Van Buren, Warsaw, MO 65355</p>
</div>
<img alt="us flag" src="../images/header/united%20states%20flag_100.jpg" height="100" width="100" />
<img alt="missouri seal" src="../images/header/missouri%20bronze%20seal_100-whole.jpg" height="100" width="100" />
<img alt="bcch" src="../images/header/bcch_100.jpg" height="100" width="100" />
</div>
</div>

<div class="wrapper row3">
<div id="mainnav">
<!--webbot bot="Include" u-include="../Includes/mainnav.html" tag="Body" -->
</div>
</div>

<div class="wrapper row4">
<div id="content">
<!-- #BeginEditable "content" -->
<div class="contentright2">
<h1>Benton County Assessor's Office</h1>
<h2>Rodger L. Reedy, Assessor</h2>
<div class="headerimage-right">
	<img alt="Roger Reedy, BC Assessor" src="../images/assessor_reedy_200.jpg" class="image-border" height="300" width="200" /></div>
	<h3>GIS Mapping</h3>
	<p>GIS Mapping of Benton county is now available from the Assessor's office. 
	By accessing this site, taxpayers are able to look up real estate 
	properties. Other information, such as building components and values, is 
	available through a subscription service.</p>
	<p>For more details, contact the Assessor's office.</p>
	<p>Visit the <a href="http://bentoncogis.com/" target="_blank">Benton County 
	GIS Mapping Application</a>.</p>
<h3>Responsibilities</h3>
	<ul>
		<li>Responsible for assessing the values of all personal property and 
		real estate in Benton County</li>
		<li>Transfers ownership of real estate on tax records</li>
		<li>provides public information about property in the county</li>
		<li>Issues certificates of non-assessment of taxes (waivers)</li>
		<li>Completes and updates county maps as property changes</li>
		<li>36" x 36" aerial maps are available for $5.00</li>
	</ul>
	<h3>Contact the Assessor's Office</h3>
	<h5>Mailing Address</h5>
	<p>P.O. Box 40 <br />
	Warsaw, MO 65355</p>
	<h5>Real Estate</h5>
	<p>Phone: (660) 438-5323 <br />
	Fax: (660) 438-3652 <br />
	<a href="mailto:county.assessor@bentoncomo.com">Email the Real Estate Office</a></p>
	<h5>Personal Property</h5>
	<p>Phone: (660) 438-5473 <br />
	Fax: (660) 438-2062 <br />
	<a href="mailto:personalproperty.assessor@bentoncomo.com">Email the Personal Property Office</a></p>
</div>
<div class="contentleft">
<h3>Offices</h3>
<div id="assessor">
<!--webbot bot="Include" u-include="../Includes/officenav.html" tag="Body" -->
</div>
</div>
<!-- #EndEditable -->
<div class="clearcontent"></div>
</div>
</div>
<div class="wrapper row5">
<div id="footer" style="left: 0px; top: 0px">
<!--webbot bot="Include" u-include="../Includes/global.html" tag="Body" -->
<p>Benton County Missouri &copy; 2011 | All Rights Reserved | 
<a href="http://www.rtbwizards.com" target="_blank">Design</a> | <a href="mailto:web.master@bentoncomo.com">Developer</a></p>
</div>
</div>

</body>

<!-- #EndTemplate -->

</html>

Open in new window


css:
/*////////// GENERAL RULES //////////*/

html {
height: 101%;
margin-bottom: 1px;}

body {
background-color: #202020; 
color: #000000;
text-align: left;
font: normal 0.80em Verdana, Verdana, Geneva, sans-serif;
padding: 0;
margin: 0;}

hr {
background-color: #a0a0a0;
color: #a0a0a0;
border: none;
height: 2px;}

table {
padding: 0;
border-collapse: collapse;
font-size: 100%;
width: 100%;}

/*////////// TYPOGRAPHY //////////*/

a {
color: #2585bf;
text-decoration: underline;
outline: none;
font-weight: bold;}

a:hover {
color: #909090;
text-decoration: underline;
font-weight: bold;}

h1 {
color: #19577d;
font: normal 30px "Palatino Linotype", Palatino, Georgia, Times, "Times New Roman", serif;
text-align: center;
margin: 0 0 .5em 0;
padding: 0 0 5px 0;}

h2 {
color: #19577d;
font: normal 20px Tahoma, Verdana, Geneva, sans-serif;
letter-spacing: 2px;
margin: .8em 0;
padding: 0 0 6px 0;
text-align: left;
border-bottom: 2px #a0a0a0 solid;}

h3 {
color: #606060;
background-color: #dfdfdf;
font: normal 20px Tahoma, Verdana, Geneva, sans-serif;
letter-spacing: 2px;
margin: .8em 0;
padding: 3px 0 3px 10px;
text-align: left;}

h4 {
color: #19577d;
font: normal 20px Tahoma, Arial, sans-serif;
text-align: left;
line-height: 40px;
letter-spacing: 1px;
padding: 0 0 1px 0;
margin: 0 0 .5em 0;}

h5 {
color: #606060;
font: bold 14px Baskerville, Georgia, Times, "Times New Roman", serif;
margin: .8em 0;
text-transform: uppercase;
text-align: left;}

h6 {
color: #606060;
font: bold 12px Baskerville, Georgia, Times, "Times New Roman", serif;
margin: .8em 0;}

/*////////// PAGE LAYOUT CONTROLS //////////*/

.wrapper {width: 100%; display: block; margin: 0; text-align: left;}

.row1 {background-color: #000000; color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#000000));
background: -moz-linear-gradient(top,  #444444,  #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
border-bottom: 1px #ffffff solid;
height: 25px;}

.row2 {background-color: #124462; color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#5eb0e0), to(#124462));
background: -moz-linear-gradient(top,  #5eb0e0,  #124462);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5eb0e0', endColorstr='#124462');
height: 140px;}

.row3 {background-color: #000000; color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#000000));
background: -moz-linear-gradient(top,  #444444,  #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
border-top: 1px #ffffff solid;
}

.row4 {background-color: #ffffff; color: #000000;}

.row5 {background-color: #202020; color: #ffffff;}

/* ------------ Row 1 Global Area ------------------*/

#global {
position: relative;
width: 960px;
height: 25px;
line-height: 25px;
letter-spacing: 1px;
font-size: 0.85em;
padding: 0;
text-align: right;
margin: 0 auto;}
	
#global ul {
margin: 0; padding: 0;}

#global li {
display: inline;
padding: 5px;
margin: 0 5px;
list-style-type: none;}

#global li a {
font-weight: normal;
color: #ffffff;
text-decoration: none;}

#global li a:hover {
color: #ffffff;
text-decoration: underline;}

/* ------------ Row 2 Header Area ------------------*/

#header {
position: relative;
width: 960px;
height: 140px;
text-align: right;
margin: 0 auto;}

#logo {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
width: 450px;
height: 100px;
text-align: left;}

.sitename {
font: normal 36px Georgia, Times, "Times New Roman", serif;
color: #fff;
letter-spacing: 3px;
padding: 20px 0 0 0;
margin: 0;}

.slogan {
font: normal 14px Georgia, Times, "Times New Roman", serif;
color: #fff;
letter-spacing: 5px;
padding: 5px 0 0 5px;
margin: 0;}

#header img {
padding: 3px;
background-color: #e0e0e0;
margin: 15px 0 15px 10px;
border: 1px #808080 solid;}

/* ------------ Row 3 Navigation Bar ------------------*/

#mainnav {
position: relative;
display: block;
height: 40px;
width: 960px;
line-height: 40px;
color: #ffffff;
margin: 0 auto;}

#mainnav ul {
margin: 0;
padding: 0;}

#mainnav ul li {
display: inline;
list-style-type: none;
text-align: center;
text-transform: uppercase;}

#mainnav ul li a {
margin: 0 10px;
text-decoration: none;
font-weight: normal;
color: #ffffff;}

#mainnav ul li a:hover {
text-decoration: none;
font-weight: normal;
color: #5eb0e0;}

/* ------------ Row 4 Content Area ------------------*/
	
#content {
position: relative;
display: block;
line-height: 1.7em;
width: 940px;
padding: 10px 0;
margin: 0 auto;
/*-----edit. allows for the footer to remain at the bottom of the page so that it doesn't expand up if there isn't enough content to fill the page*/
min-height: 530px; }

.contentleft {
float: left;
width: 300px;
margin: 0 10px 0 0;}

.contentmiddle {
float: left;
width: 300px;
margin: 0 10px 0 10px;}

.contentright {
float: right;
width: 300px;
margin: 0 0 0 10px;}

.contentleft2{
float: left;
width: 620px;
margin: 0 10px 0 0;}

.contentright2 {
float: right;
width: 620px;
margin: 0 0 0 10px;}

/* TO CLEAR COLUMNS FROM ABOVE */
.clearcontent {
height: 1px;
line-height: 1px;
margin: 0;
padding: 0;
clear: both;}

/* ------------ Row 5 Footer Area ------------------*/

#footer {
position: relative;
display: block;
text-align: center;
font-size: 0.85em;
clear: both;
width: 940px;
height: 60px; /*adjusted from 130 for lack of images and to create smaller footer */
line-height: 1.5em;
color: #ededed;
letter-spacing: 3px;
margin: 0 auto;
padding: 20px 0;}

#footer ul {
margin: 10px 0 20px 0; 
padding: 0;}

#footer li {
letter-spacing: 2px;
display: inline;
padding: 3px;
margin: 0 15px;
list-style-type: none;}

#footer a, #footer li a {
color: #5eb0e0;
text-decoration: none;}

#footer a:hover, #footer li a:hover {
color: #ffffff;
text-decoration: underline;}

#footer p {
clear: both;}

/*////////// IMAGES //////////*/
img {
border: none;}

.image-border {
background-color: #ffffff;
padding: 3px;
border: 1px #919191 solid;}

.imageleft-noborder {
background-color: #ffffff;
margin: 0 10px 0 0;
float: left;}

.imageright-noborder {
background-color: #ffffff;
margin: 0 0 0 10px;
float: right;}


.imagecenter-noborder {
background-color: #ffffff;
margin-right: auto;
margin-left: auto;
display: block;
}/*additional*/

.imageleft-border {
background-color: #ffffff;
margin: 0 10px 0 0;
padding: 3px;
float: left;
border: 1px #919191 solid;}

.imageright-border {
background-color: #ffffff;
margin: 0 0 0 10px;
padding: 3px;
float: right;
border: 1px #919191 solid;}

.imagecenter-border {
background-color: #ffffff;
margin-right: auto;
margin-left: auto;
display: block;
padding: 3px;
border: 1px #919191 solid;}/*additional*/


.headerimage-right {
	background-color: #ffffff;
	float: right;
	padding-left: 10px;
	padding-bottom: 10px;}/*additional*/

/*////////// MISC. CLASSES //////////*/

.center {
text-align: center;}

.right {
text-align: right;}

.clear {
clear: both;}

.clearcontent {
height: 1px;
line-height: 0;
margin: 0;
padding: 0;
clear: both;}

.calendar {
line-height: 1.2em;}

.gallery {
text-align: center;}

.gallery img {
padding: 5px;
border: 1px #808080 solid;
margin: 5px;}

/*////////// ADDITIONAL CLASSES, ADDED BY DEVELOPER //////////*/
.footnote {
font-size: .7em;
margin-top: 10px;}

tr.alt td, tr.alt th {
background-color: #EAEAEA;}

.icon {
	margin: 5px;
}
.sublink {
font-size: .75em;
line-height: .75em;
}
.justify {
	text-align: justify;
}

Open in new window

0
 
LVL 2

Author Comment

by:warsawtech
ID: 37965713
Does anyone have any ideas?
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 300 total points
ID: 38034035
Wrap each 'column' in a DIV and the float them left. Set a width of 33% (or pixel based if you prefer) and you should be good to go :)

<h3>Contact the Assessor's Office</h3>
<div class="innerCol">
     <h5>Mailing Address</h5>
     <p>P.O. Box 40 <br />
     Warsaw, MO 65355</p>
</div>
<div class="innerCol">
     <h5>Real Estate</h5>
     <p>Phone: (660) 438-5323 <br />
     Fax: (660) 438-3652 <br />
     <a href="mailto:county.assessor@bentoncomo.com">Email the Real Estate Office</a></p>
</div>
<div class="innerCol">
     <h5>Personal Property</h5>
     <p>Phone: (660) 438-5473 <br />
     Fax: (660) 438-2062 <br />
     <a href="mailto:personalproperty.assessor@bentoncomo.com">Email the Personal Property Office</a></p>
</div>

//css
.innerCol { width: 33%; float:left; }

Open in new window

0
 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 200 total points
ID: 38034067
You can create the columns by adding some additional markup around the <h5> and <p> tags.

Markup:
<div class="three-col">
	<h5>Mailing Address</h5>
	<p>P.O. Box 40<br>Warsaw, MO 65355</p>
</div>

<div class="three-col">
	<h5>Real Estate</h5>
	<p>Phone: (660) 438-5323 <br>Fax: (660) 438-3652 <br><a href="mailto:county.assessor@bentoncomo.com">Email the Real Estate Office</a></p>
</div>

<div class="three-col last">
	<h5>Personal Property</h5>
	<p>Phone: (660) 438-5473 <br>Fax: (660) 438-2062 <br><a href="mailto:personalproperty.assessor@bentoncomo.com">Email the Personal Property Office</a></p>
</div>

Open in new window

CSS declarations:
.three-col {
    float: left;
    margin-right: 4%;
    width: 30.6666%;
}

.last {
    margin-right: 0 !important;
}

Open in new window

0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Learn why
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question
Easy Methods to  Remove Duplicate Emails in Outlook!
Article by: Jane
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The Ultimate Checklist to Optimize Your Website
Article by: Anush
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Rounded Corner Effect in CSS
Video by: Sarah
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Introduction to jQuery (Part 2)
Video by: Jason
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Advertise Here

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Advertise Here