Question

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?

Answer 1

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;
}