Displaying 2 divs next to each other

  • Hi Guys,

    Relatively new to this but I’ve been stuck on this for the past 2 days.
    I simply want to position to divs next to each other like columns. Here is a link to my site https://www.izzysplacealamo.com and here is my code…

    Please help!

    <div id="apDiv1" style="position: float; left: 13px; top: 11px; width: 350px; height: 283px; z-index: 1; text-align: center; vertical-align: middle;">

<a href="https://izzysplacealamo.com/wp-content/uploads/2013/07/chefjoe_350.png"><img alt="chefjoe_350" src="https://izzysplacealamo.com/wp-content/uploads/2013/07/chefjoe_350.png" width="350" height="242" /></a>
Chef Joe Paranello
</div>

<div id="apDiv1" style="position: float; left: 13px; top: 11px; width: 294px; height: 316px; z-index: 1; vertical-align: top;">
<h1 style="text-align: center;">Izzy’s Place Wine Room</h1>
<p style="text-align: center;">The wine room can accommodate up to 45 people for dinner and for private parties.
Please email <a href="mailto:[email protected]">[email protected]</a> to reserve a date for your holiday party.</p>

<h1 style="text-align: center;">Chef's Table</h1>
<p style="text-align: center;">Arrange for an intimate dinner for up to four with Chef Joe at the Chef's Table in the kitchen. Please email <a href="mailto:[email protected]">[email protected] </a> make a reservation.</p>

</div>

Viewing 4 replies - 1 through 4 (of 4 total)

  • First, don’t use inline CSS -it’s really harder to manage – just assign the classes or id’s in the HTML and add the CSS externally.

    I also don’t see the code above on that page.

    The CSS you are using also isn’t valid – float is not a position attribute.

    Try this in your Custom CSS:

    #apDiv1 {
   float: left;
   width: 350px;
}

    Thread Starter dwaitrovich

    (@dwaitrovich)

    That seemed to do the the trick! But now the two div’s are wedged right next to each other. Is there a way to put some space between the two now?

    Sure, you can always add margins – depending on how much space you want, adjust:

    #apDiv1 {
   float: left;
   width: 350px;
   margin: 0 20px;
}

    That puts zero for top/bottom and 20 on the sides.

    Thread Starter dwaitrovich

    (@dwaitrovich)

    Thank you so much! I feel like I’m getting closer to the site displaying properly but unfortunately the two divs seem to leaning more left instead of being equally distributed space-wise in the body. And the mobile site still seems to be cutting off content.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Displaying 2 divs next to each other’ is closed to new replies.