SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <div>'s within <div> problem

    I'm trying to convert to CSS but i am stumped with my curret problem. The #main id is supposed to keep all the content on a white background, but everything after the image shows up outside of the #main ID. the Title and Date show up on the gray background just below the white #main BG. how can i keep EVERYTHING within the #main ID?

    Thanks

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Untitled</title>
    	<style type="text/css">
    <!--
    body
    {
    	background-color: #717171;
    	margin: 0px;
    	padding: 0px;
    }
    .topImage
    {
    	width: 538px;
    	height: 141px;
    	background-color: gray;
    	background-image: url(file://localhost/Users/Eric/Desktop/leafTop1.jpg);
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px;
    }
    #main
    {
    	width: 530px;
    	background-color: white;
    	margin-left: auto;
    	margin-right: auto;
    	height: auto;
    }
    .siteTitle
    {
    	color: #333333;
    	font-family: courier, monospace;
    	font-size: 30px;
    	text-decoration: none;
    	letter-spacing: 5px;
    	padding: 20px 0px 20px 50px;
    }
    .mainImage
    {
    	border-color: #717171;
    	border-width: 5px;
    	border-style: solid;
    	padding: 1px;
    	margin: 0 50px 5px 50px;
    }
    .mainImageTitle
    {
    	float: left;
    	padding: 0 0 0 50px;
    	display: inline;
    }
    .mainImageDate
    {
    	float: right;
    	display: inline;
    	padding: 0 50px 0 0;
    }
    
    
    -->
    </style>
    </head>
    <body>
    <div class="topImage"></div>
    <div id="main">
    	<div class="siteTitle">ericbusch.net</div>
    	<img class="mainImage" src="/Users/Eric/Desktop/1099283050.jpg" width="420" height="" alt="280" />
    	<div class="mainImageTitle">Title</div>
    	<div class="mainImageDate">Date</div>
    </div>
    
    </body>
    </html>

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand correcly can you just not move the div inside #main

    <div id="main">
    <div class="topImage"></div>
    <div class="siteTitle">ericbusch.net</div>
    <img class="mainImage" src="/Users/Eric/Desktop/1099283050.jpg" width="420" height="" alt="280" />
    <div class="mainImageTitle">Title</div>
    <div class="mainImageDate">Date</div>
    </div>

    Also you are defining a width in topImage that is wider that #main.?

    Hope this helps a bit?
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  3. #3
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks ox, but i am not having problems with the topImage. That div basically sits on top of the #main div. i am having problems with mainImageTitle and mainImageDate div's. and those are within the #main div.

  4. #4
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aaaaaah ok im not 100% sure that gecko based (NS/FF/Moz) browsers support height: auto; so maybe be worth setting a height like

    height: 400px;

    I also have trouble with height's.

    Dont know if that helps
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  5. #5
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i got it now. i just had to add some padding-bottom to the #main div. thanks for your help!

  6. #6
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fantastic
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net


Bookmarks

Posting Permissions

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