Div Problem ..Please Help me ...

Discussion in 'CSS' started by Venus, Nov 8, 2007.

0
  1. #1
    Hi, Friends , how can I fit the categories background , it does not fits with the #leftmnu.

    When I enter some text in #content , the #box background color will appear and the bg image doesn’t fits with the #leftmnu.
    Below is the Html and Css Code ….
    Please Email me the Solution of this Problem …Waiting for reply

    Html code:

    <body>
    <div id="box">
    <div id="header"> </div>

    <div id="navig"> Horizontally Navigation </div>

    <div id="leftmnu"><h3> Categories....</h3> </div>

    <div id="content">
    <h2>Installing Apache</h2>

    <p>This is the cat that ate the rat that lay in the house that Jack built</p>
    <p>This is the cat that ate the rat that lay in the house that Jack built</p>
    <p>This is the cat that ate the rat that lay in the house that Jack built</p>
    <p>This is the cat that ate the rat that lay in the house that Jack built</p>
    <p>This is the cat that ate the rat that lay in the house that Jack built</p>
    <br><br>

    This is the cat that ate the rat that lay in the house that Jack built
    <p>This is the cat that ate the rat that lay in the house that Jack built</p>
    <p>This is the cat that ate the rat that lay in the house that Jack built</p>
    <p>This is the cat that ate the rat that lay in the house that Jack built</p>
    <p>This is the cat that ate the rat that lay in the hous End........</p>
    </div>

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

    CSS Code…
    body {
    margin:0;
    padding:0;
    font-size:90%;
    color: #000;
    background-color: #ccf;
    font-family: georgia , times , " Times New Roman";
    }
    #box{
    float: left;
    margin:0 auto;
    width: 779px;
    }

    #header{
    float: left;
    width: 779px;
    height: 70px;
    margin: 0 ;
    background-image: url(images/img_01.gif);
    background-repeat: no repeat ;
    }


    #navig{
    float: left;
    width: 779px;
    height: 30px;
    margin: 0 ;
    background-color: silver;
    background-image: url(images/img_02.gif) no repeat;

    }


    #leftmnu{
    float: left;
    width: 200px;
    height: 384px;
    margin: 0 auto;
    background: url(left.gif) repeat -y;

    }

    #content{
    float: left;
    width: 579px;
    height: 384px;
    margin: 0 auto;
    background: url(content.gif) repeat-y;

    }

    #footer{
    float: left;
    width: 779px;
    height: 36px;
    margin: 0 ;
    background-image: url(footer.gif);
    background-repeat: no repeat ;
    }
     
    Venus, Nov 8, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, I didn't understand a word of what was asked... Maybe someone can translate from Engrish to English?

    ...but looking at the code:

    #box{
    float: left;
    margin:0 auto;
    width: 779px;
    }

    So you don't want it centered? The float overrides the margin:auto so it's not centered - in which case either remove the float or axe the margin declaration. THEN you are doing the same thing on the columns which makes even LESS sense.

    #header{
    float: left;
    width: 779px;
    height: 70px;
    margin: 0 ;
    background-image: url(images/img_01.gif);
    background-repeat: no repeat ;
    }

    and this is floating why exactly?

    You've got everything floating - for no reason I can find (the only thing that should be floats are your columns, and even then only one of them NEEDS it), your footer isn't set to clear the columns, and in general I'm seeing a lot of code that shouldn't even be neccessary.

    Do you have a picture of what you are trying to accomplish?
     
    deathshadow, Nov 8, 2007 IP
  3. Venus

    Venus Member

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Thanks for your timely reply.I am a newbie for Css .
    I wanted to ask that how can I code a Layout
    ( Header+Navigation + Left Column + center Column + Right Colum and footer)
    and use .gif images in background . When I enter Text in left columns and and Center Columns the other coulumn resize itself automaticaly in width and length in explorer.
    The Complete Zip files is attached , in which , when I add extra text in Left column its height increses but the center columns remain fixed . How can I make it auto resize with other columns ( left + right Columns)
    I need html and css code for this layout.

    Thanks

    Hope I have explained my problem
     
    Venus, Nov 9, 2007 IP
  4. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #4
    Here's a quick template design i just wrote quickly (not tested).

    HTML
    
<div id="container">

  <div id="header">Header</div>
  
  <div id="nav">Nav</div>

  <div id="cols">

    <div id="leftbar">LeftBar</div>

    <div id="rightbar">RightBar</div>

    <div id="content">Content</div>

    <div class="clear">&nbsp;</div>
  
  </div>

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

</div>
    Code (markup):
    CSS
    
* {
margin:0;
padding:0;
}

html {
text-align:center;
}

div {
text-align:left;
}


#container {
width:780px;
margin:0 auto;
}

#header, #nav, #footer {
text-align:center;
}

#cols {
background:#eaeaea;
}

#leftbar {
float:left;
width:150px;
}

#rightbar {
float:right;
width:150px;
}

#content {
padding:0 160px 0 160px;
}

.clear {
clear:both;
}
    Code (markup):
     
    webdesigner, Nov 9, 2007 IP
  5. Venus

    Venus Member

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #5
    Thanks a lot for your timely help . I must now practice on it and test it .
     
    Venus, Nov 10, 2007 IP