Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Feb 2009
    Posts
    6
    Member #
    18369
    I'm trying to design this site: http://ashleyklamb.com/about.html

    but I'm having this problem: whenever the browser window is smaller than about 900px wide, the textbox gets shoved below the menu, which I don't want to happen. I would rather have the text inside the box wrap instead of the whole textbox moving below the menu.

    The CSS I'm using:
    Code:
    #textbox {
    	border: 1px solid #666;
    	float: left;
    	padding: 20px;		
    }
    
    #menu {
    	list-style: none;
    	width: 130px;
    	float:left; 
    	padding-top: 10px;
    }
    Any ideas on how to accomplish this?

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Quote Originally Posted by jon.reeve
    I'm trying to design this site: http://ashleyklamb.com/about.html

    but I'm having this problem: whenever the browser window is smaller than about 900px wide, the textbox gets shoved below the menu, which I don't want to happen. I would rather have the text inside the box wrap instead of the whole textbox moving below the menu.

    The CSS I'm using:
    Code:
    #textbox {
        border: 1px solid #666;
        float: left;
        padding: 20px;        
    }
    
    #menu {
        list-style: none;
        width: 130px;
        float:left; 
        padding-top: 10px;
    }
    Any ideas on how to accomplish this?
    Might need some of your html, but anyways what Id do is make a wrapper div and give it a fixed width.
    float the menu left, float the textbox right
    HTML Code:
    <style>
    #wrapper{width: 800px;}
    #menu{float: left; width: 130px;}
    #textbox{float:right; margin-left: 10px;}
    </style>
    <div id="wrapper">
    <div id="menu">
    </div>
    <div id="textbox">
    </div>
    </div>
    This is my best stab at this, hope it helps

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    oh also
    for the textbox
    set overflow: auto;

    so scrollbars will be shown if the text inside is bigger than the textbox (if your using a fixed height)

  5. #4
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    i viewed your source, downloaded a copy of your html and css.
    try this, not sure if its working how you would like, but its a start.
    and can hopefully lead you in the right direction
    place a wrap your menu and textbox div with this
    HTML Code:
    <div id="encaser"></div>
    and add this to your css
    HTML Code:
    #encaser{
    overflow: hidden;
    }
    
    #textbox {    
        border: 1px solid #666;
        padding: 20px;    
        position: relative;
        margin-left: 150px;
        overflow: auto;
    }
    
    #menu {
        list-style: none;
        width: 130px;
        padding-top: 10px;
        float: left;
    }
    This is the best i could do hope you figure it out, gnite!!!

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Skip the extra divs and just drop the [minicode]float: left;[/minicode] on your textarea div. That will let it squeeze with the page. Floated divs typically don't respond dynamically to the page width, the browser instead wraps them so that they're on top of each other and then maybe starts wrapping them. You should be able to maintain your current design without floating that div left, however.

    If you want your textbox to also scroll, add the overflow: auto mentioned above directly to that div.

  7. #6
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    I tried removing the float right on your textbox. it was one of the first things i did last night, this also produced the same problem you were having.
    the way i got around it above was by
    having a div encase the menu and textbox, floating the menu left, and positionin the textbox relative to the encaser div.

    I did notice your design wasnt fixed width....so my solution might not be viable.
    never worked with fluid layouts sorry

  8. #7
    Junior Member
    Join Date
    Feb 2009
    Posts
    6
    Member #
    18369
    Thanks for all the help! Using an encasing div with a fixed width seems to be helping. Now when the browser window is narrower, the textbox isn't putting itself below the menu anymore, which is an improvement. I still can't get the text in the textbox to wordwrap, though, which means that I get a horizontal scrollbar with a narrower browser window. What I'd like to do is to have the page compensate for narrower windows (and therefore smaller resolutions, like 800x600) by having the text in the textbox wrap in on itself, rather than getting a horizontal scrollbar. Does anyone know a way this might be possible?

    I tried removing the "float: left" in the textbox div but the textbox border swallowed the menu, and all the text leaked out all around the menu, which made it a lot worse.

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hm. Strange. When I tried it earlier it seemed like it worked, but it looks like I forgot to add a margin-left. By default, when you have a non-floated div next to a floated div, it will indeed flow around the floated div. In fact, this is precisely what floating is meant to allow -- layouts where the text flows around another item, like a quotation or an image. The way to get around this flowing around is to give the non-floated element a left margin equal to the width of the floated element. This will push the floated element's borders far enough right to get out of the floated element's way, and prevent it from flowing around the floated element.

    In short, get rid of the wrapper, get rid of the float: left on your textbox element, and then give it:

    Code:
    margin-left: 130px;
    Sorry for the oversight earlier

  10. #9
    Junior Member
    Join Date
    Feb 2009
    Posts
    6
    Member #
    18369
    Thanks a lot. It worked and now everything is solid.

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Good to hear


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:36 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com