Margin-top not working

music_fan01 · October 18, 2011

I am trying to get rid of my <br/> tags by using margin-top, but when I insert my margin-top into the div that has my image and two paragraphs it doesnt work where I it. It adds it below my links. I have an image and my two paragraphs in my content div and the content div is in the main div. I've tried putting margin-top in my content div, nothing happens, I put it in my main div and thats where I get the break at. Dont know what I am doing wrong.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author 

intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


<!-- header -->
     <div id="header">
    	<div id="logo"><a href="#">Header</a></div>
        <div id="menu">
        	<ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="contact.php">Contact</a></li>
    <li><a href="guestbook.php">Guestbook</a></li>
            
                  </ul>

<div><a href="twitter.com/">
<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>

   
      </div>
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
<div id="text">
                <h1><strong>Welcome</strong></h1>
</div>

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


<div id="image">
<img src="images/test.jpg" style="width: 360px;"/></div>




<div id="p">
<div style="float: left; width: 180px;">
<h2>Header</h2>
  <p>
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>


<div id="div" style="float: left;">
<img src="images/div103.gif" /></div>

<div style="float: left; width: 190px;">
<h2>Header</h2>
  <p>
    This is our left text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
  </div>
</div>


</div>


           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality 

Software</a>

    </div>
    </div>
    <!-- end footer -->
</div>
    <!-- end main -->



</body>
</html>


/* body */

body {
margin:114px 0 0 0; 
line-height:16px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
}

a { 
color:#018BC1;
}
a:hover { 
text-decoration:none;
}
#header {}
#logo { 
padding:30px 0 120px 0;
color:#fff; 
text-align:center;
}


/* logo */
#logo a{ 
color:#fff; 
text-decoration:none; 
font-weight:bold; 
font-size:24px; 
text-transform:uppercase; 
}

/* Menu */
#menu {
color:#fff; 
text-align:center; 

}
#menu ul {
text-align:center;
list-style:none; 
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a { 
font-weight:bold; 
font-size:14px; 
text-decoration:none; 
color:#fff; 
background-color:#445d6c; 
padding:0 10px 2px 10px;
}
#menu ul a:hover 
{ 
background-color:#f26513;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;

}
#content {
width: 780px; 
margin:0 auto;
overflow:hidden;
margin-bottom:3cm;



}

/ * Text */
#text {
    float: left;
    width: 780px;
}
#text p {
margin:7px 0 7px 0;
}

#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}

h1 {
margin:30px 0 0 0; 
padding:5px 0 7px 45px; 
text-transform:uppercase; 
font-size:24px; color:#fff; 
background:url(images/h1_bckg.jpg) no-repeat;
float:left;
}

/* Footer */

#footer {
background:url(images/footer_bckg.jpg) no-repeat top center; 
height:102px; clear:both; 
width:780px; 
margin:0 auto; 
}
#left_footer {
float:left;
padding:60px 0 0 30px; 
color:#fff; font-size:12px;
}
#left_footer a { 
color:#fff;
}
#left_footer a:hover { 
text-decoration:none;
}
#right_footer { 
float:right;  
padding:60px 30px 0 0; 
color:#fff;  
font-size:12px; text-align:right;
}
#right_footer a { 
color:#fff;
}
#right_footer a:hover { 
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px

}


/* Floats */

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

/* gallery */
.row img {
    margin: 2px;
    border: 1px solid #0000ff;
    clear: both;
    width: 100px;
    height: 90px;
    margin-left:3px;
}

.first
{
    float: right;
    text-align: center;
} 
     
.last {
    border: 1px solid #ffffff;
    float: right;
}

.desc
{
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 10px;
}


/* image */
#image {
float: left; 

}

/* paragraphs */
#p {
    float: right;  
    margin-right: 4px;
}

/* Divider */
#div {
float: right; 
width: 20px; 
margin-right: 1px;
height: 200px;
}

/* Icon */
#icon {
text-align:center;
}

Frank P · October 19, 2011

There is no margin declared for div#image:

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="image">
    <img src="images/test.jpg" style="width: 360px;"/>
</div>

(...)

#image {
    float: left; 
}

Also, you have a very illogical and redundant way of giving elements IDs, and you're using way too much divs. You'd better do a good - and free - course in CSS before you continue: http://w3schools.com (step-by-step) or http://htmldog.com (crash course).

sunfighter · October 19, 2011

<div id="p"> contains your two header columns and and space div. It lives in the same div that <div id="image"> does. This is why margin-top does not work.

All of these exist under <div id="text"> which has the word WELCOME. Use margin-bottom: in #text CSS.

music_fan01 · October 19, 2011

Would it be better to put margin-top in the image css or that #text css?

music_fan01 · October 20, 2011

There is no margin declared for div#image:
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="image">
    <img src="images/test.jpg" style="width: 360px;"/>
</div>

(...)

#image {
    float: left; 
}
Also, you have a very illogical and redundant way of giving elements IDs, and you're using way too much divs. You'd better do a good - and free - course in CSS before you continue: http://w3schools.com (step-by-step) or http://htmldog.com (crash course).

I went back and focused on my divs and I read over the tutorials. Would using classes be a better option?

Frank P · October 20, 2011

I went back and focused on my divs and I read over the tutorials. Would using classes be a better option?

]

No, that makes little difference. And I don't wanna be an a......le, but your rebuttal question makes clear that your understanding of CSS hasn't improved much since yesterday. I would really urge you to do the step-by-step W3 Schools course, lest you will run into much, much more trouble.

Sign In

Margin-top not working

Recommended Posts

music_fan01

Link to comment

Share on other sites

Frank P

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

music_fan01

Link to comment

Share on other sites

music_fan01

Link to comment

Share on other sites

Frank P

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information