• Registered: 2009-11-03
  • Posts: 9

Topic: Text in Neighboring Div's too close.

Hello,

I have two adjacent divs that are placed throughout a few pages. The text is too close to the neighboring div. What is the best way to put a small buffer b/w these two?

Thanks

Last edited by 803andy (2009-11-03 00:18:07)

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: Text in Neighboring Div's too close.

In most cases, adding a bit of margins or padding is the way to go about this. Sorta depends on how your site is currently coded.... You have a link to one of the pages (and specify which are the two divs that are "too close")?

  • Registered: 2009-11-03
  • Posts: 9

Re: Text in Neighboring Div's too close.

Thanks Ben,

I've been trying to use padding and margin, but the side text then flys off the page.

Below is my file (bare minimum):
http://www.sendspace.com/file/4kv863

Please let me know where I'm wrong.

Thnx

  • Registered: 2009-11-03
  • Posts: 9

Re: Text in Neighboring Div's too close.

//The right div will contain text and sometimes contain an image.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: Text in Neighboring Div's too close.

Can you clarify -- in the HTML file, which are the two divs that you are talking about, and how exactly are you hoping to change what is there? Where are you wanting to add spacing?

  • Registered: 2009-11-03
  • Posts: 9

Re: Text in Neighboring Div's too close.

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.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: Text in Neighboring Div's too close.

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:

<div class="solo_left">
<div class="left_wrapper">
    content here...
</div>
</div>

And then the css:

 .left_wrapper { padding-right: 40px; }
  • Registered: 2009-11-03
  • Posts: 9

Re: Text in Neighboring Div's too close.

Thanks a lot, that idea is very slick..........

  • Registered: 2009-11-03
  • Posts: 9

Re: Text in Neighboring Div's too close.

Hmmmm...  now the only problem is IE or IE6,

I'm using:

.left_wrapper {
    padding-right: 15px;   

}

I'm using the left_wrapper div right under the main_left div.

It works well in Firefox but it's going off the page in IE6

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: Text in Neighboring Div's too close.

I took a look at your code again... Check the "images/right_line.jpg" images which is within the .solo_text div. You have given them a width of 540px, but the .solo_text div is only 532px wide. That may be causing the issue you are experiencing.

  • Registered: 2009-11-03
  • Posts: 9

Re: Text in Neighboring Div's too close.

Yeah I changed that to no avail. The closest I got was to remove padding and just display right, but the results were quirky. Here is the updated code with just the two divs in question:

CSS:

body{
width: 780px;
    margin-top: 12px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.solo_text {
    width: 540px;
    height: 1310px;
    float: right;
    color: #999999;
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
   
       
}
.solo_left {
    width: 240px;
    height: 1310px;
    float: right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
   
}
.left_wrapper {
    padding-right: 15px;   

}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<div class="solo_text">


<br><br><br>
<b>Validate your business, while reaching a global audience.</b><br><br>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:</b><br>
<br>- Text Text
<br>- Text Text
<br>- Text Text
<br>- Text Text
<br>- Text Text
<br>- Text Text
<br>- Text Text
<br>- Text Text
<br>- Text Text
<br>- Text Text

<br><br><br>
<br><br>
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


</div>

<div class="solo_left">
<div class="left_wrapper">
    <div class="subheader1"><b>Creative Web Designs</b></div>
<br>
<div class="subheader2">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</div>

<br>
<div class="subheader1"><b>Affordable Pricing</b></div>
<br>
<div class="subheader2">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</div>
</div>
</div>
</body>
</html>

Thanks again for your help.

  • Registered: 2009-11-03
  • Posts: 9

Re: Text in Neighboring Div's too close.

Could it be the doctype??

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: Text in Neighboring Div's too close.

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="wrapper">
    <div class="solo_text">
    <b>Validate your business, while reaching a global audience.</b><br><br>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:</b><br>
    <br>- Text Text
    <br>- Text Text
    <br>- Text Text
    <br>- Text Text
    <br>- Text Text
    <br>- Text Text
    <br>- Text Text
    <br>- Text Text
    <br>- Text Text
    <br>- Text Text
    
    <br><br><br>
    <br><br>
    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
    
    </div>

    <div class="solo_left">
        <div class="left_wrapper">
            <div class="subheader1"><b>Creative Web Designs</b></div>
            <br>
            <div class="subheader2">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</div>
            
            <br>
            <div class="subheader1"><b>Affordable Pricing</b></div>
            <br>
            <div class="subheader2">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</div>
        </div>
    </div>
</div>

</body>
</html>
  • Registered: 2009-11-03
  • Posts: 9

Re: Text in Neighboring Div's too close.

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!!