div going up

Discussion in 'CSS' started by dizyn, Nov 2, 2008.

  1. #1
    I want to display a row, then a row of 3 columns and then one more row.

    First is working fine, but 2nd and 3rd are creating problems on FF

    3rd goes up.

    here is my code.

    I want to show it like thisl
    1. library-grey div
    3. lib-content div with 3 cols in it.
    4. pages div

    any one help me out?

    Regards,

    code:

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style>
    #lib-content { padding:0px;border: 1px solid #000000;}
    #lib-logo    { width:50px;  margin-left:5px; float:left; border: 1px solid #FFCCbb;}
    #lib-doc     { width:50px;  margin-left:5px; float:left; border: 1px solid #FFCCcc;}
    #lib-archive { width:50px;  margin-left:5px; float:left; border: 1px solid #FFCCdd;}
    </style>
    </head>
    
    <body>
    <div id="main-left-content">
    				<div id="library-grey" style="background:#A8A88E;">
    					Uplaod | Archives
    				</div>
    				
    				<div id="lib-content">
    					<div id="lib-logo">			Logo				</div>
    					<div id="lib-doc">					a pdf				</div>
    					<div id="lib-archive">					arch				</div>
    				</div>
    				<div id="lib-content">
    					<div id="lib-logo">			Logo				</div>
    					<div id="lib-doc">					a pdf				</div>
    					<div id="lib-archive">					arch				</div>
    				</div>
    				
    				<div id="pages" align="right" style="background:#E0E0B0;" class="text">
    					<strong>pages: 1 | 2 | 3 | 4 | 5 </strong>
    				</div>
    				
    			</div>
    </body>
    </html>
    
    
    HTML:
     
    dizyn, Nov 2, 2008 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    Validate your markup for your list of html errors.
    ID names can only be used once per page.
    The <style> tag should be <style type="text/css">
     
    drhowarddrfine, Nov 2, 2008 IP
  3. mypsdtohtml

    mypsdtohtml Guest

    Messages:
    96
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    validate to w3c is the best option to see errors in xhtml / css
     
    mypsdtohtml, Nov 3, 2008 IP
  4. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hello, dizyn . I can fix the problem with $15 only.
    But I prefer you give a url and describe the problem clear to me.
    I would like to know if you are interested to let me do the work for you .
     
    justinlorder, Nov 4, 2008 IP
  5. witsols

    witsols Peon

    Messages:
    102
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    A typical Web page has one or more of the following divisions:

    * header: defining the top banner and possibly navigation of the page - as it's a header, a header tag is appropriate

    <h1>...</h1>

    * navigation: defining the navigation of the page - this is usually a list, so use a list

    <ul id="navigation">...</ul>

    * left sidebar: defining a sidebar on the left

    <div id="sidebar">...</div>

    * right sidebar: defining a sidebar on the right

    <div id="subtext">...</div>

    * body: defining the main portion of the page

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

    * footer: defining the footer and possibly sub-navigation of the page

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

    Once you've defined the <div> elements of your page, you can then use CSS to style them however you'd like.


    zubair.
     
    witsols, Nov 4, 2008 IP
  6. pendelton

    pendelton Peon

    Messages:
    61
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    DIVs are the type of creatures that like some type of height if you give a width.

    I added height:25px; after the width and the layout looks pretty good.

    I name mine very easy names. one, two, three, four, fourA, fourB. :)
     
    pendelton, Nov 4, 2008 IP