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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: div issues...

  1. #1
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,820
    Thanks
    42
    Thanked 199 Times in 198 Posts

    div issues...

    Hi, before reading further, remember none of us were born knowing how to code- so please no condescending bs...
    anyways- I am new to coding... in the past week i have drilled my head through xhtml and css w/ more intensity than i ever exp in college... UNFORTUNATELY- I am sort of "self teaching"... I have made serious headway and at the end of last week I encountered a snag that I cannot come to terms with. The code I will post is VERY basic... but it does not load correctly... I feel I am missing something bc I have no "formal" teacher... so any help would be great...
    What I am trying to do...
    Basically just understand these flippin div elements more... What I want (to avoid table base layouts) is to float three div elements (I havent made it past the first two )

    what my aim is ... I need the "header" div to contain the div elements "headtext" and "headimg"...
    then floating to the left of the page the div "leftspace"

    the problems...

    1 my header div does not stretch around the two divs "headtext" and "headimg" ...

    2 the img i have (you wont be able to see) just kinda hangs out to the upper right... it is not contained within its element... Ive tried using <hr> both within the elements headtext/headimg and also in the div header... this does not work either (i took them out, but left code there in case i am writing it wrong)

    3) neither of my two divs (headtext or headimg) are within the div header (and they are supposed to be

    4 my div leftspace keeps getting thrown into the div element "headimg" ....


    i have spent hours looking through forum posts, web resources and the limited printed ref that i have and i see no reason it wont work properly... what am i missing?!

    This is one of my final hurdles b4 i start to learn jscript and it is driving me nuts... its so basic but i cannot figure it out...

    also- to the would be "go and validate" i know there are errors with height/width being defined in my body/table elements, but when i removed them i still had same issue.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>title title title title title title title title title </title>


    <link rel= "stylesheet"
    type= "text/css"
    href= "title.css" />
    <style type= "text/css">
    .header{
    border: 3px darkblue solid;
    position: relative;
    float: top;
    clear: both;
    width: 100%;
    height: 5%;
    }

    div.item hr{
    display: block;
    clear: both;
    visibility: hidden;
    }

    .left{
    position: relative;
    float: left;
    clear: left;
    width: 5%;
    height: 90%;
    background-color: black;
    }



    </style>

    </head>
    <body height= 720px width= 1024px>

    <!-- ----------------------------------------------------------------------------------------
    "header" "header" "header" "header" "header" "header" "header" "header" "header" "header" -->
    <div class= "header">
    <div id= "headtext">
    Text in the header section!
    </div>
    <div id= "headimg">
    <img src= "./logo.jpg"
    alt= "logo">
    <div>
    </div>
    <!-- "header" "header" "header" "header" "header" "header" "header" "header" "header" "header"
    ------------------------------------------------------------------------------------------ -->







    <!-- -----------------------------------------------------------------------------------------
    outer left menu. outer left menu. outer left menu. outer left menu. outer left menu. outer -->
    <div id= "left_space" class= "left">
    <table height= 100% width= 100% border=1>
    <tr height= 60% width= 100% bgcolor= "green">
    <td>Text Top </td>
    </tr>
    <tr height= 40% width= 100% bgcolor= "darkgreen">
    <td> Text Bottom </td>
    </tr>
    </table>
    </div>

    <!-- outer left menu. outer left menu. outer left menu. outer left menu. outer left menu. outer
    ------------------------------------------------------------------------------------------ -->





    ps- how do you post code inside those nifty scroll boxes?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo "skeleton" header, 2 columns and footer layout as a guide.

    I've added a headerImg and a headerText div to the header div. They are floated left and right. The "2 columns" are a side bar and main content div.

    I'm not sure what your "leftspace" is for. If you want some blank space on your page you can set margins and/or padding to elements to create space around them or their content.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 900px;
                    margin: 0px auto 0px auto;
                    border: 1px solid red;
                    height: auto;
                }
                #header {
                    border: 1px solid blue;
                    overflow: hidden;
                }
                #header #headerImg {
                    width: 200px;
                    float: left;
                    border: 1px solid orange;
                }
                #header #headerText {
                    width: 690px;
                    float: right;
                    border: 1px solid orange;
                }
                #content {
                    width: 70%;
                    float: left;
                }
                #content .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                }
                #sidebar {
                    width: 30%;
                    float: right;
                }
                #sidebar .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                    border: 1px solid green;
                }
                #footer {
                    clear: both;
                    border: 1px solid black;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">
                    <div id="headerImg">HEADER IMG</div>
                    <div id="headerText">HEADER TEXT</div>
                </div>
                <div id="content">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>LEFT MAIN CONTENT COLUMN</h1>
                    </div>
                </div>
                <div id="sidebar">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>RIGHT SIDE BAR COLUMN</h1>
                    </div>
                </div>
                <div id="footer">
                    <h1>FOOTER BAR</h1>
                </div>
            </div>
        </body>
    </html>
    ps- how do you post code inside those nifty scroll boxes?
    highlight your code as if you were going to copy it and then click the # icon in the editors toolbar
    Last edited by bullant; 04-26-2011 at 04:24 AM.

  • Users who have thanked bullant for this post:

    alykins (04-26-2011)

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    You want to use [code] tags to enclose it, with a corresponding close tag after.

    First of all, there is no float:top, so that actually will do nothing.

    Also, I believe there might be some css in title.css that might help figure out the problem, but I suspect it has to do with floats.

    First, if you are using float:left on an element and want a div element on the right, you can either float the element on the right, or set the width of the element to be the remainder of space left over from the left element, then it will automatically place itself on the right.

    If the right element is longer than the left element always, then you don't have to worry so much about 'random' behavior, like more content falling to the right of the left element you don't want to. If you do get that problem, you can use 'clear'. For instance, if you put 'clear:left' on another element, it will place that element either at the end of a 'float:left' element or the next 'line', which ever comes later.

    If you make a div, and put two divs in it that both float, the containing div will not encompass the two inner divs, and the way to get around that is to have one of the divs not float, but be the remaining width, or if that is not possible, add a dummy div that has 'clear:both' on it. Some designers will setup a CSS class that only has 'clear:both' and will use it when necessary.

    Hope that helps, and if you post the contents of that css file, I will more likely be able to spot the error.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Wojjie View Post
    If you make a div, and put two divs in it that both float, the containing div will not encompass the two inner divs, and the way to get around that is to have one of the divs not float, but be the remaining width, or if that is not possible, add a dummy div that has 'clear:both' on it.
    An easier way imo is to just set overflow: hidden on the containing div - see #header css styles in my demo.
    The border on the header div then encloses its 2 child floated divs.

  • Users who have thanked bullant for this post:

    Wojjie (04-26-2011)

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,820
    Thanks
    42
    Thanked 199 Times in 198 Posts
    why do you call out #header #headerImg{ and #header #headerText{...
    also... the "leftspace" you could think of as a "left element"... or a "left column" ... i didn't know what to call it so i called it leftspace

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,820
    Thanks
    42
    Thanked 199 Times in 198 Posts
    Quote Originally Posted by Wojjie View Post
    Hope that helps, and if you post the contents of that css file, I will more likely be able to spot the error.
    oops.... forgot the css....


    Code:
      #headimg {
         height: 100%;
         width: 25%;
         float: right;
         clear: right;
         background-color: gray;
         }
         
      #headtext {
         height: 100%;
         width: 75%;
         float: left;
         clear: left;
         background-color: green;
         }
    Last edited by alykins; 04-26-2011 at 04:40 AM.

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by alykins View Post
    why do you call out #header #headerImg{ and #header #headerText{...
    ok, that is just a personal preference to remind me that headerImg and headerText are child elements of header.

    Since the child divs have their own id, you could use just

    Code:
    #headerImg {
                    width: 200px;
                    float: left;
                    border: 1px solid orange;
                }
    #headerText {
                    width: 690px;
                    float: right;
                    border: 1px solid orange;
                }
    But bear in mind, say for some reason you had 2 divs inside an element, say #header, and the 2 divs did not have an id and you want to assign a background colour of green to those 2 divs without affecting the other divs on the web page you would have to do something like

    Code:
    #header div {
        background-color: 'green';
    }
    Last edited by bullant; 04-26-2011 at 04:45 AM.

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,820
    Thanks
    42
    Thanked 199 Times in 198 Posts
    for the leftspace issue- it will have a table in it; think of it as leftcolumn... im not really having an issue with this except it keeps popping up inside my div element headimg.... as for the #header #headXXX items... doesnt this affect css attributes? or... better question... how would you render these elements in a css file... #header #headerXXX? or will css realize that #headerXXX is an element even though it has #header in front of it?

    Does it matter that i am working with % instead of px?

  • #9
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by bullant View Post
    An easier way imo is to just set overflow: hidden on the containing div - see #header css styles in my demo.
    The border on the header div then encloses its 2 child floated divs.
    Seems sort of a 'hack' as overflow:hidden is not meant for that purpose, and it doesn't work on IE8.

  • #10
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Your problem relies on the fact that the browser is not considering the height of your two floating elements.

    What I would do is:

    HTML snippet:
    Code:
    <div class= "header">
      <div id= "headimg"><img src= "./logo.jpg" alt= "logo"><div>
      <div id= "headtext">Text in the header section!</div>
    </div>
    CSS:
    Code:
     #headimg {
         width: 25%;
         float: right;
         background-color: gray;
      }
         
      #headtext {
         width: 74%;
         background-color: green;
      }
    I usually like to add a few pixels room incase since different browsers might calculate width differently depending on what other CSS rules you have. This is also assuming that #headtext is going to be taller tahn #headimg

    Also, you might want to consider putting clear:both in the left space.
    Last edited by Wojjie; 04-26-2011 at 06:08 AM. Reason: clear:both on left space

  • #11
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Wojjie View Post
    it doesn't work on IE8.
    It's not a hack and works perfectly in my IE7,8,9, FF4, Oprah11, Safari for Windows and Chrome.
    Last edited by bullant; 04-26-2011 at 06:18 AM.

  • #12
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by bullant View Post
    It's not a hack and works perfectly in my IE7,8,9, FF4, Oprah11, Safari for Windows and Chrome.
    Oops, sorry, I was testing it without a doctype.

    But it is still a work around/hack as it is not really intended for this purpose, and only works due to the side effect of overflow: hidden;. Though it is a neat work around, and I may use it in the future, but there are a few draw backs to it, like being at the mercy of the parent container (if its the parent container, you can end up with content being hidden when resizing the window), and being careful not to later set a width and/or height of that div.

  • #13
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    I've always used overflow: hidden because it fits my purposes when I use it, but if making content potentially invisible is an issue, one can always use overflow: auto instead to extend the parent container's border around the floated child elements and they will get scroll bars automatically on the parent container if needed.

  • #14
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Both can be essentially undesirable, but it isn't too difficult to make sure that that doesn't happen.

    Either way, the trick will be filed in my head, as I love minimizing HTML markup, I optimize every byte I can away, since they can add up fast, and can amount to a huge savings in bandwidth and a noticeable difference in page load.

  • #15
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem

    Don't get me wrong. I'm not trying to get you to change the way you normally do things. I just posted the way I do it as an alternative since I don't have any issues with it and people can choose whatever method works best for them


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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