CODEWITHSUNDEEP
htmlcss
TeaDrinkingGeek
TeaDrinkingGeek

Reputation: 2023

Large gap between text, how to fix?

I have two div that when previewed in a browser have a large gap between them.

Code:

<div id="title-1">
        <p>XXX is pleased to announce the launch of our Social Enterprise - Experience Us</p>
    </div>
    <div id="maindescription-1">
        <p>XXX are conducting unique tours to celebrate us, the beating heart of our culture in Scotland.  We will be 
        taking people on a journey through Glasgow, Scotland on a guided tour about the stories of the locals and pioneers that
        made Glasgow what it is today, and then expanding the experiences with tasting tours of the variety of delicious cuisines
        on offer.  Please see below for more information:</p>

CSS:

#title-1 {
    font: normal normal bold 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    float: left;
    width: 850px;
    padding: 10px;
    color: #FFFF00;
    text-align: justify;
    vertical-align: baseline;
}
#maindescription-1 {
    font: 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    float: left;
    width: 850px;
    padding: 10px;
    color: #FFFFFF;
    text-align: justify;
    vertical-align: baseline;
}

How to fix this problem?

Upvotes: 0

Views: 2005

Answers (3)

leonjorge23
leonjorge23

Reputation: 21

You could use a reset to prevent browser default settings sneaking up on you. I like Eric Meyer’s reset: http://bkaprt.com/rwd/9/

Upvotes: 2

Oedum
Oedum

Reputation: 816

First you need to close the last div

    <div id="title-1">
            <p>XXX is pleased to announce the launch of our Social Enterprise - Experience Us</p>
        </div>
        <div id="maindescription-1">
            <p>XXX are conducting unique tours to celebrate us, the beating heart of our culture in Scotland.  We will be 
            taking people on a journey through Glasgow, Scotland on a guided tour about the stories of the locals and pioneers that
            made Glasgow what it is today, and then expanding the experiences with tasting tours of the variety of delicious cuisines
            on offer.  Please see below for more information:</p>    
</div>

And the you should set margin for p to 0

p 
{
    margin : 0;
}

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

just adjust the margin and padding (differently applied by default on every browser) for the element <p>

e.g. 

p {
    margin : 1em 0 0 0; // or 0
    padding : 0;
}

Upvotes: 0

Related Questions