Jump to content
Stef's Coding Community

Text in Neighboring Div's too close.


Recommended Posts

The solo_text & solo_left divs are too close. I would like some more space b/w the two. Depending on the words or the sentence the text and the two divs nearly touch in some instances.

 

I've tried padding and margin, but the results have always pushed one div completely out of focus.

Link to post
Share on other sites

In general, I try to stay away from setting both a height and top/bottom margins/padding on the same element (or similarly, setting a width and a left/right margins or padding). This avoids some potential browser compatibility issues.

 

Your best bet here is to add a wrapper div within one of the two that will give it the padding you need. For example:

 


   content here...

 

And then the css:

 .left_wrapper { padding-right: 40px; }

Link to post
Share on other sites

 

 

 

 

 

 

 

 

Validate your business, while reaching a global audience.

 

Text, text, text, text,

 

text, text Text, text, text, text, text, text Text, text, text, text, text, text Text, text,

 

text, text, text, text Text, text, text, text, text, text Text, text, text, text, text, text

 

Text, text, text, text, text, text Text, text, text, text, text, text:

 

 

- Text Text

 

- Text Text

 

- Text Text

 

- Text Text

 

- Text Text

 

- Text Text

 

- Text Text

 

- Text Text

 

- Text Text

 

- Text Text

 

 

 

 

 

 

 

 

Text, text, text, text, text, text Text, text, text, text, text, text Text, text, text, text,

 

text, text Text, text, text, text, text, text Text, text, text, text, text, text Text, text,

 

text, text, text, text Text, text, text, text, text, text Text, text, text, text, text, text

 

 

 

Creative Web Designs

 

 

Left left left left left left left left left left Left left left left

 

left left left left left left Left left left left left left left left left left

 

 

 

Affordable Pricing

 

 

ALeft left left left left left left left left left Left left left left

 

left left left left left left Left left left left left left left left left left

Link to post
Share on other sites

here is one way that I have tested and know that it works...

 

-- I've added a wrapper div surrounding the two columns, giving that the specific width and margin: 0 auto (margin top and bottom 0, margin left and right auto). I also added "overflow:auto" so it would correctly wrap around the two text columns

-- I also added a background color on both the body and the wrapper div to show where the columns were

 

Changing the doctype shouldn't affect the positioning of the columns, though I always use the strict doctype rather than transitional.

 

css:

body { margin:0; background: #ffff00; }

.wrapper {
   width: 780px;
   margin:0 auto;
   background: #fff;
   overflow: auto;
}

.solo_text {
   width: 540px;
   float: right;
   color: #999999;
   font-size: 14px;
   font-family: Verdana, Arial, Helvetica, sans-serif;


}
.solo_left {
   width: 240px;
   float: left;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;

}
.left_wrapper {
   padding-right: 30px;   
}

 

html:

br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









Validate your business, while reaching a global audience.

Text, text, text, text,

   text, text Text, text, text, text, text, text Text, text, text, text, text, text Text, text,

   text, text, text, text Text, text, text, text, text, text Text, text, text, text, text, text

   Text, text, text, text, text, text Text, text, text, text, text, text:


- Text Text

- Text Text

- Text Text

- Text Text

- Text Text

- Text Text

- Text Text

- Text Text

- Text Text

- Text Text








   Text, text, text, text, text, text Text, text, text, text, text, text Text, text, text, text,

   text, text Text, text, text, text, text, text Text, text, text, text, text, text Text, text,

   text, text, text, text Text, text, text, text, text, text Text, text, text, text, text, text





Creative Web Designs


Left left left left left left left left left left Left left left left

           left left left left left left Left left left left left left left left left left



Affordable Pricing


ALeft left left left left left left left left left Left left left left

           left left left left left left Left left left left left left left left left left





Link to post
Share on other sites

I hate to sound greedy....

 

The above code does work; however, when I try and implement it into the entire page, I am still getting an issue in IE6. I believe there is something small I'm missing:

 

I have attached the "full-webpage" with the wrapper class implemented. Its fine in fireworks but still acts up IE6.

 

http://www.sendspace.com/file/ac6u38

 

I appreciate your time in helping me troubleshoot this matter greatly!!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...