Prevent HTML elements overlapping each other

Page 1 of 1

9 Replies - 955 Views - Last Post: 25 September 2012 - 12:32 PM

#1 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Prevent HTML elements overlapping each other

Posted 25 September 2012 - 10:47 AM

My knowledge in positioning HTML elements using CSS is pretty crappy so I've been trying to figure it out.

Here's the simple template I created first of all.

Posted Image

Then I added 3 more areas on top of the body area.

Posted Image

The problem is when I try to add the final area (Content area 4), it shows up under the Content area 2 and Content area 3. Like this

(I just commented out the CSS rules of those to get this screenshot)

Posted Image

How can I make it appear after Content area 2 and Content area 3? (TO cover the little bit of body space in the 2nd image)

here's the HTML code of the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/ericmeyer_css_reset.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
</head>
<body>

<div id="container">

    <div id="header">
    	
    </div>
    
    <div id="body">
    	<div id="area-1">
        	
        </div>
        <div id="area-2">
        	
        </div>
        <div id="area-3">
        	
        </div><
        <div id="area-4">
        	
        </div>
    </div>

	<div id="footer">
    	
    </div>
</div>

</body>
</html>


And the CSS

#container { width:900px; height:1100px; font-family:Segoe UI, Calibri, sans-serif; margin-left:auto; margin-right:auto; background-color:#FFF; position:relative;  }

#header { width:900px; height:200px; background-color:#C0F; }

#body { width:900px; height:800px; background-color:#0FF; }

#area-1 { width:900px; height:310px; background-color:#0C3; }

#area-2 { width:600px; height:300px; background-color:#CF6; float:left; }

#area-3 { width:300px; height:300px; background-color:#FC6; float:right; }

#area-4 { width:900px; height:190px; background-color:#F39; }

#footer { width:900px; height:100px; background-color:#603; }

This post has been edited by nK0de: 25 September 2012 - 11:08 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Prevent HTML elements overlapping each other

#2 AnalyticLunatic  Icon User is offline

  • D.I.C Addict

Reputation: 162
  • View blog
  • Posts: 633
  • Joined: 25-June 12

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 10:54 AM

First issue is your area-4 width. It is set to 900px while area-2 is 600px and area-3 is 300px. Change all three areas to 300px and see if that gets you going somewhere.
Was This Post Helpful? 0
  • +
  • -

#3 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 11:04 AM

The page width is 900px. Since area-2(600px) and area-3(300) adds up to 900px, I don't see how that would be a problem. area-4 should take up the full width which is 900px.
Was This Post Helpful? 0
  • +
  • -

#4 AnalyticLunatic  Icon User is offline

  • D.I.C Addict

Reputation: 162
  • View blog
  • Posts: 633
  • Joined: 25-June 12

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 11:29 AM

Sorry, between all the annoyingly bright colors and such a long page of information I was understanding it as you wanted BETWEEN 2 & 3.

Just for kicks and giggle, try putting several (more than 1) break tags after area-3 but before area-4.

<br /><br /><br /><br />

Let me know what things look like from there.
Was This Post Helpful? 0
  • +
  • -

#5 AnalyticLunatic  Icon User is offline

  • D.I.C Addict

Reputation: 162
  • View blog
  • Posts: 633
  • Joined: 25-June 12

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 11:47 AM

You have an extra opening right BEFORE area-4 is created. Just noting. Take a look at what I have below and tell me what it is you are wanting if not similar to what I have done after some modification.

</div><
<div id="area-4">


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/ericmeyer_css_reset.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<div id="container">

    <div id="header">
    Header	
    </div>
    
    <div id="body">
    	<div id="area-1">
        1	
        </div>
        <div id="area-2">
        2
        </div>
        <div id="area-3">
        3
        </div>
        <div id="area-4">
        4
        </div>
    </div>

	<div id="footer">
    Footer	
    </div>
</div>

</body>
</html>


CSS:

#container { width:900px; height:1400px; font-family:Segoe UI, Calibri, sans-serif; margin-left:auto; margin-right:auto; background-color:#FFF; position:relative;  }

#header { width:900px; height:100px; background-color:#C0F; }

#body { width:900px; height:400px; background-color:#0FF; }

#area-1 { width:900px; height:155px; background-color:#0C3; }

#area-2 { width:600px; height:150px; background-color:#CF6; float:left; }

#area-3 { width:300px; height:150px; background-color:#FC6; float:right; }

#area-4 { width:900px; height:95px; background-color:yellow; float: none}

#footer { width:900px; height:100px; background-color:orange; }


Attached Image
Was This Post Helpful? 0
  • +
  • -

#6 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 12:10 PM

This is exactly where I'm stuck. As you can see from the 13th line in your CSS code, the area-4 does not get displayed. (You've set the background color as yello but it appears as light blue on the screenshot.) If you comment out the line 9 and 11 and run, you'll see the area-4 is appearing right after area-1. I want to push it down to cover up the light blue area.
Was This Post Helpful? 0
  • +
  • -

#7 AnalyticLunatic  Icon User is offline

  • D.I.C Addict

Reputation: 162
  • View blog
  • Posts: 633
  • Joined: 25-June 12

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 12:16 PM

Got it! You need to div the 2 floats into a single div of their own!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/ericmeyer_css_reset.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<div id="container">

    <div id="header">
    Header	
    </div>
    
    <div id="body">
    	<div id="area-1">
        1	
        </div>
		<div id="grouped">
        <div id="area-2">
        2
        </div>
        <div id="area-3">
        3
        </div>
		</div>
        <div id="area-4">
        4
        </div>
    </div>

	<div id="footer">
    Footer	
    </div>
</div>

</body>
</html>




CSS:


#container { width:900px; height:1400px; font-family:Segoe UI, Calibri, sans-serif; margin-left:auto; margin-right:auto; background-color:#FFF; position:relative;  }

#header { width:900px; height:100px; background-color:#C0F; }

#body { width:900px; height:400px; background-color:#0FF; }

#area-1 { width:900px; height:155px; background-color:#0C3; }

#area-2 { width:600px; height:150px; background-color:#CF6; float:left; }

#area-3 { width:300px; height:150px; background-color:#FC6; float:right; }

#area-4 { width:900px; height:95px; background-color:yellow;}

#grouped {width: 900px; height: 150px; }

#footer { width:900px; height:100px; background-color:orange; }


Attached Image

This post has been edited by AnalyticLunatic: 25 September 2012 - 12:17 PM

Was This Post Helpful? 1
  • +
  • -

#8 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2888
  • View blog
  • Posts: 7,533
  • Joined: 08-June 10

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 12:18 PM

two notes that may help you:
- floated elements do not count when calculating the parent container’s dimensions. they are taken out of the normal flow.
- the counter-property of float is clear.
Was This Post Helpful? 1
  • +
  • -

#9 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 12:29 PM

Adding clear:both; did the trick. Thanks Dormilich.
#area-4{ width:900px; height:190px; background-color:#F39; clear:both; }


And thanks for your suggestions as well AnalyticLunatic.
Was This Post Helpful? 0
  • +
  • -

#10 AnalyticLunatic  Icon User is offline

  • D.I.C Addict

Reputation: 162
  • View blog
  • Posts: 633
  • Joined: 25-June 12

Re: Prevent HTML elements overlapping each other

Posted 25 September 2012 - 12:32 PM

View PostnK0de, on 25 September 2012 - 12:29 PM, said:

Adding clear:both; did the trick. Thanks Dormilich.
#area-4{ width:900px; height:190px; background-color:#F39; clear:both; }


And thanks for your suggestions as well AnalyticLunatic.


No problem, my apologies if I was a bit of a grump at the beginning (one of those days).

I've read and attempted to use clear:both in my code before, but usually in my situations it has been of little to no use. Nice to work with a very simple example and understand it now.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1