Help with divs

[BrooklynSpice]

Hi all,

On my homepage, i made 4 boxes. I used css, and they all came out even.

On another page of my site, i have been trying to make them even out, using the same ids, but they aren't working. Any idea what I am doing wrong?

Here is the CSS,

#pinkleftbox {
	width: 460px;
	border: 3px solid #ff0000;
	margin: 0;
	padding: 5px;
	float: left;
	background-color: #FEB0B0;
 
}
 
#blueleftbox {
	width: 460px;
	border: 3px solid #ff0000;
	margin: 0;
	padding: 5px;
	float: left;
	background-color: #AFD1E9;
 
}
 
#pinkrightbox{
	width: 460px;
	border: 3px solid #ff0000;
	margin: 0;
	padding: 5px;
	float: right;
	background-color: #FEB0B0;
}
 
#bluerightbox {
	width: 460px;
	border: 3px solid #ff0000;
	margin: 0;
	padding: 5px;
	float: right;
	background-color: #AFD1E9;
 
}

and here is the html

<div id="pinkleftbox">
 
We can diagnose and repair various types of computer problems <a href="/">click here</a> to contact us if you are experiencing any of the following:
	<ul>
		<li>Computer Running Unusually Slowly</li>
		<li>Random Crashes / Frequently Freezes</li>
		<li>Unexpectedly Shuts Down or Restarts</li>
		<li>"Blue Screen of Death" Errors</li>
		<li>Virus Infection</li>
		<li>Computer will not boot (Start)</li>
		<li>Hardware / Driver Issues</li>
		<li>Hardware replacement</li>
		<li>Audio / Video Issues</li>
		<li>Power Supply Issues</li>
		<li>And More!</li>
	</ul>
 
 
Sometimes computers may act a little strange and you may be unsure which of these categories, if any, your problem fits into. If that's the case, no problem! Simply <a 
 
href="/">click here</a> to contact us and let us know what you are experiencing. We will help figure out the problem and the quickest and most cost effective solution! 
<br/><br/>
</div> <!--endpinkleftbox-->
 
 
 
<div id="bluerightbox">
We can also perform various types of preventative maintenance and hardware upgrades to keep your computer running quickly and smoothly! We can come right to your home to do 
 
this, so you don't have to be without your computer! These services include:
	<ul>
		<li>Anti-Virus Software Installation</li>
		<li>Virus Scanning</li>
		<li>System Backup Software Installation </li>
		<li>Schedule regular back-ups</li>
		<li>PC Tune-Up</li>
		<li>Increased Storage Space (Internal or External)</li>
	</ul>
 
We can also do remote mainentance. We can have a shared session with you to do reventative maintenance. One of our technicians will log in and perform these services while you 
 
watch. We have maintenance packages including:
 
	<ul>
		<li>Weekly</li>
		<li>Bi-Weekly</li>
		<li>Monthly</li>
		<li>Custom Plans</li>
	</ul>
 
</div> <!--endbluerightbox-->
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
<div id="blueleftbox">
 
Are you looking for a new PC? We can help you design a PC that is right for your needs and your budget! We will custom design and build your PC and deliver it right to your 
 
door! our services include:
	<ul>
		<li>Custom PC Design - including free consultation!</li>
		<li>PC Assembly - We will not only design, but build you PC (at no extra charge!)</li>
		<li> FREE DELIVERY!  - After we design and build your PC, we will deliver and set it up for FREE!!</li>
		<li>PC Consultation - if you really want a PC from a place like HP or Dell, we will help you decide what is best for your needs and budget!</li>
 
 
</div><!--end blueleftbox-->

the page is no where near done, but some of it it uploaded at www.heightsdigital.com

any help is appreciated! Thanks!!

~Lauren

[nofel]

The Problem is with float, when you want element to float next to each other. the other element follows the first element property, in your case u have given

#pinkleftbox {
    width: 460px;
    border: 3px solid #ff0000;
    margin: 0;
    padding: 5px;
    float: left;
    background-color: #FEB0B0;
 
}

and second div (which you want to be floated next to first div ) has this property

#bluerightbox {
    width: 460px;
    border: 3px solid #ff0000;
    margin: 0;
    padding: 5px;
    float: right;
    background-color: #AFD1E9;
 
}

The mistake it that second element has property of float:right, thus it float on the right side of the screen, just remove it float and everything will be good, also add a margint:5px; (depending how much margin you want), i have corrected the css and here is it.

#pinkleftbox {
	width: 460px;
	border: 3px solid #ff0000; 
	margin: 0; 
	padding: 5px;
	float: left;
	background-color: #FEB0B0;}
#blueleftbox {
	width: 460px;
	border: 3px solid #ff0000;
	margin: 0;
	padding: 5px;
	float: left;
	background-color: #AFD1E9;}
#pinkrightbox{
	width: 460px;
	border: 3px solid #ff0000;
	margin: 0;
	padding: 5px;
	float: right;
	background-color: #FEB0B0;}
#bluerightbox {
	width: 460px;
	border: 3px solid #ff0000;
	margin-left:5px;
	padding: 5px;float: left;
	background-color: #AFD1E9;}

Hope this is what your looking for

[BrooklynSpice]

will this change the div on the home page? they seem to line up.

[BrooklynSpice]

i changed them, and uploaded them to www.heightsdigital.com. The first two boxes still seem to be off by 1/2 a line. if i put in a break, it's too much. thanks!

[nofel]

if your mean the distance the text and boxes. using too many <br/> isn't a good tidy markup, if u want space between them, u can class the h4 element and the p element to have margin-bottom:20px; (depending on how much u want the distance to be), and then u can achieve the same amount of distance between boxes and text as of lots of <br/> but this time, good tidy markup

[BrooklynSpice]

distance between the boxes is fine. It just seems that, even though they adjust to the content inside them (vertically), the boxes are 1/2 a line off. If it was a full line, I could just add a <br>, but in either direction, it seems half off.

[BrooklynSpice]

Also, thanks! I am somewhat new at this, and was wondering if there was a better way than using all of the breaks. Thanks. I will try your suggestion.!

[nofel]

from inside or outside?

[nofel]

Also, thanks! I am somewhat new at this, and was wondering if there was a better way than using all of the breaks. Thanks. I will try your suggestion.!

you welcome, i am learning myself though, i had same problem when i started. its common and frustrating, but practice and experimenting make you better

[BrooklynSpice]

from inside. There is the background color, and the border, and on the home page, they line up, but on the other pages, the boxes inside the border are slightly off.

[nofel]

without a page example its hard to say what's going wrong. i have the home page. paste the link where you having problem

[BrooklynSpice]

http://www.heightsdigital.com/computer.html

[nofel]

r u asking about the heading? overlapping menu, because i am little confused as the home page got boxes, but has just formated text?

[BrooklynSpice]

if you look at the style sheet, i used "pinkleftbox", "bluerightbox", "bluerightbox", and "pinkleftbox". on the homepage, they line up. on the computer page, they won't line up.

[nofel]

on Computer page. there are no boxes like on homepage. its just text

[BrooklynSpice]

actually it was, "pinkleftbox", "bluerightbox". blueleftbox", pinkrightbox".

[BrooklynSpice]

are you sure? i uploaded it to http://www.heightsdigital.com/computer.html

[nofel]

it wasn't showing css before, now it is.just remove float:from row 2 box, the problem is with width's it doesn't add up total to the size of wrapper as wrapper is 980px with 10px border each side. we have to subtract the 10 from each side making it, 960px, now your content is has margin of 10px, subtract that two from 960, we are left with 940, now ur boxes pinkbluebox (i dont remember the name exctaly) have width of 460, and 3px of border, making it 466, now box i is 466, and column 2 is 463 that makes, 932, i know it doesnt't sum of to be excat of wrapper but i m a new learner myself. there must be more element i might mix which make the inner content width more than outer. that is why its happening. i hope it solve your problem. though i am learning it myself.
Edit, pls correct me if i am wrong. i love to add things to my knwoledge

[nofel]

did it helped?

[BrooklynSpice]

Hey, sorry for the slow response. I was out of town for a few days. Back now. I will try your suggestions, and keep you posted. Thanks!!

[BrooklynSpice]

Hi, I found the problem. The box on the right had two <ul> lists in it. For some reason, this was making the height of the two boxes uneven. By simply removing one list, they are now even. Thanks again for all of your help.I'm sure i'll be back for more help, so we'll talk again soon Have a great night!!

~ Lauren