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 5 of 5
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I have a blog design, which is in its simplest form it is 2 divs, one called leftcontent and one called rightcontent.

    When there are no posts, the left div has little content in it (just a "there are no posts" message). When this is the case, some of the content in the rightcontent div, moves under the leftcontent div. I want the rightcontent's content to stay over to the right.

    Heres my css, oh and none of the divs are wrapped in an outer div

    Code:
    	#leftcontent {
    		width: 67%;
    		float:left;
    		background:#fff;
    		border: 1px solid black;
    		margin-right:15px;
    		padding-bottom:20px;
    		}
    thanks in advance

  2.  

  3. #2
    Senior Member
    Join Date
    Aug 2003
    Posts
    444
    Member #
    2801
    Can you please post a URL so we can take a look?
    eKstreme
    eKstreme.com - Free website tools!
    fontfox - free fonts Hand-picked quality fonts.

  4. #3
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    Keep your left column floated to the left and apply float: right; to your right column. You will need to nest these inside a <div> with the equivalent width of both columns.
    Code:
    <div>
    <div style="float: left;"></div>>
    <div style="float: right;"></div>
    </div>

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Thanks Trico. However, because I only have 2 divs, the rightcontent is obviously aligned to the right, it strays away from the leftcontent div.

    A solution? maybe set some padding-right?

  6. #5
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    You could try creating the CSS version of an invisible spacer .gif so the left column never hits the threshold of breaking the layout apart.

    You have't stated to us why you cannot use more than one <div> block. Agreeing with eKstreme, I would recommend you provide a more extensive example including html or post a current url.

    If you apply a tempory border/unmatching background colour to the left content div block then fill the column with a small paragraph of Lorem Ipsum and scale the text's size back and fourth (Firefox) you should be able to visually see the process that is causing the right column to shift.


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 08:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com