CODEWITHSUNDEEP
htmlcss
user4766919
user4766919

Reputation:

Inline-block divs not aligning horizontally

I have a project where I need to align certain elements just so. For whatever reason, it's not working. My HTML:

<div class="heading">
    <h1>Exotic <strong>Travel</strong></h1>
        <div class="left">
        <ul>
            <li><a href="index.htm">homepage</a></li>
            <br>
            <li><a href="aboutus.htm">about us</a></li>
            <br>
            <li><a href="destination.htm">destinations</a></li>
            <br>
            <li><a href="booking.htm">book a ticket</a></li>
            <br>
            <li><a href="contact.htm">contact us</a></li>
        </ul>
        </div>
    <div class="rightimg">
            <img src="banner.jpg" alt="Beachside Hotel" />
    </div>
    <div class="righttext"> 
            <h2>The Perfect Destination</h2>
    </div>

</div>

and the CSS: 

body {
    background-image: url(sky.jpg);
    font-family: "Verdana", sans serif;
    }

h1 {
    font-family: "Calibri Light", sans serif;
    color: gray;
    }

h2 {
    background-color: green;
    display: inline-block;
    border: 0;
    margin: 0;
    text-align: center;
    width:  750px;
    }

a  {
    color: white;
    margin: 4px;
    padding: 5px 0 5px 0;
    text-decoration: none;
    }

.left{
    background-color: red;
    display: inline-block;
    float: left;
    height: 200px;
    width: 350px;
    }

.heading {
    background-color: white;
    margin: 0 auto;
    overflow: auto;
    width: 1000px;
    }


.righttext {
    display: inline-block;
    float: right;
    height: 60px;
    width: 750px;
    }

.rightimg {
    display: inline-block;
    float: right;
    margin: 0;
    padding: 0;
    width: 750px;
    }

This SHOULD be working, based on other similar examples I've seen on the site, but it's not taking. Any help here would be appreciated.

Upvotes: 0

Views: 4301

Answers (2)

Des Horsley
Des Horsley

Reputation: 1888

I think you are breaking it with your fixed widths, I used 40% width on the left and righttext and that seemed to get everything inline:

.left{
background-color: red;
display: inline-block;
float: left;
height: 200px;
width: 40%;
}

.righttext {
display: inline-block;
float: right;
height: 60px;
width: 40%;
}

https://jsfiddle.net/bkyLojx4/

Also as an fyi br tags are not valid in a ul. Rather use css to handle the styling of the list.

Upvotes: 2

Cjmarkham
Cjmarkham

Reputation: 9681

It is because you have the elements at a fixed width which means the combined width of all 3 elements is more than the space available. Try using a percentile widths for adaptive design or adjusting it to the resolution you want to support.

Upvotes: 0

Related Questions