www.webdeveloper.com
Results 1 to 7 of 7

Thread: Div not in the right place

  1. #1
    Join Date
    Mar 2006
    Posts
    81

    Div not in the right place

    I have added a new div into my page call "whatwedo" which is meant to be at the same level as the logo on the righthandside. The text is a description of what the client does.
    Why is it not in the right place, how do I sort it out?Thanks for any pointers
    .whatwedo { float: right; width: 200px; font-weight: bold; }

    http://216.219.94.105/david1.htm
    Thanks

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Since the new div follows the image in the html, the float occurs at the end of the image. The new div could be put before the logo image in the html, or the logo could be floated left, which would then require the menu clear the two floats above it :
    Code:
    #header img {float: left;}
    #topnav {padding-left: 0; border-top: #d8e1e9 4px solid; margin: 9px 0px 0px; width: auto; clear: both;}

  3. #3
    Join Date
    Mar 2006
    Posts
    81

    Expand horizontally

    Thanks a lot for those pointers Centauri really appreciated. I tried it out and it nearly works but I have the problem that the text expands vertically and not horizontally so when I am enlarge the text in IE or FF it breaks. What can I do to make sure that the text "expands" horizontally and not vertically. Thank you.

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    It did that due to the narrow width (200px) that was set. Going back to your "whatwedo" div, if the wrap to the second line is explicitly defined with a <br>, then you can align the text to the right and make the div much wider to accomodate text resize.

    html
    Code:
    <div id="whatwedo">A specialist consultancy in Healthcare, Personnel <br>Selection and Property, Environment and Defence.</div>
    css
    Code:
    #whatwedo { float: right; width: 600px; text-align: right; padding-right: 30px}

  5. #5
    Join Date
    Mar 2006
    Posts
    81
    Thanks Centauri! I thought that brs were not advisable in a pure css solution? TheyŽll make life a lot easier for me though and it works fine now thanks!
    Last edited by eddietheeagle; 07-27-2007 at 09:12 AM.

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Well, you could do away with the <br> and set a width in ems if you like - a little experimenting would show how many ems to use.

    If you really wanted to reduce non-semantic elements, the #whatwedo div itself can be eliminated by enclosing the text within paragraph tags, and styling the paragraph with reference to the #header - eliminating an id as well.

  7. #7
    Join Date
    Mar 2006
    Posts
    81
    That sounds like a nice solution, I can foresee maybe some trouble with the topnav in the same div but IŽll cross that bridge when I come to it, thanks again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles