Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    margin-top css doesn't work unless large value

    I think I'm seeing strange behavior here that is inconsistent with my understanding of floats and margins. 1) I have two ul elements floating and a div sits under them without any clear: both property - that is, I don't have a clear:both property specified. That's strange because it's supposed to be ignoring the floats but it doesn't and sits under the floats (which is what I want but usually it requires clear: both). 2) The two ul elements have no bottom margin and so I try to assign the div below them a top margin yet it won't move at all until I assign it a huge top margin of 5em. This is odd behavior because there should be no margins competing here since the ul elements don't have any. 10px top margin should be able to work for the div but it doesn't. Here's what I have:
    Code:
    <style>
    #contactUs {
    	width: 500px;
    	margin: 0 auto;
    	overflow: auto;
    	font: normal normal normal 1em/1.2 Arial, Verdana, sans-serif;
    }
    
    #contactUs h1 {
    	text-align: center;
    	color: #939598;
    	font-weight: bold;
    }
    
    #contactUs ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	line-height: 1.5em;
    	font: normal normal normal 1em/1.5 Arial, Verdana, sans-serif;
    }
    
    ul#contactFort {
    	float: left;
    	width: 260px;
    	margin: 5px 0 0 5px;
    }
    
    ul#contactPrin {
    	float: right;
    	width: 230;
    	margin: 5px 0 0 5px;
    }
    
    #mailTo {
    	text-align: center;
    	margin-top: 1em;
    }
    
    #contactUs a {
    	text-decoration: none;
    	color: green;
    }
    </style>
    	<div id="contactUs">
    		<h1>Contact Us</h1>
    		<ul id="contactFort">
    			<li>200 Wells Drive</li>
    			<li>Yellow Springs, OH</li>
    			<li>800-000-0000</li>
    		</ul>	
    		<ul id="contactPrin">
    			<li>100 Main St.</li>
    			<li>Printown, OH</li>
    			<li>800-000-0000</li>
    		</ul>
    		<div id="mailTo"><a href="mailto:info@us.com">info@us.com</a></div> 
    	</div>
    Thanks for any insight.

  • #2
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i think that if you float the two ul elements to the left and use clear both property in your mailto div you can get what you want... and then add some more styles for it looks good

    let me know if it was useful

    regards
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    The DIV is sitting underneath them because without clear both because there is no room for it to sit next to the UL's, because the container has a set width of 500px. However you should be adding clear both to the DIV anyway if you want a margin, why don't you want to use this?

    You are also missing the px declaration here (see bold) which could cause additional problems:

    Code:
    ul#contactPrin {
    	float: right;
    	width: 230;
    	margin: 5px 0 0 5px;
    }

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Scriptet View Post
    there is no room for it to sit next to the UL's, because the container has a set width of 500px.
    [/CODE]
    Thanks for reply. I removed the ".com" and it ignored the floats and pushed up. I added back the ".com" and it behaved like as if it had clear: both applied:
    Code:
    <div id="mailTo"><a href="mailto:info@us.com">info@us.com</a></div>
    Is this me losing my head or is there something about this in the specification?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •