CODEWITHSUNDEEP
htmlcss
jazzy1331
jazzy1331

Reputation: 63

How to prevent Div from creating a new line

I am creating a menu bar using Div's. The only problem is that each div is vertically on top of each other due to its block style property, but I would like it to be a horizontal bar.

Here is my CSS code:

#homeButton{
height: 50px;
width: 125px;
background-color: lightblue;
}

Here is HTML code:

<div id="homeButton">
<p id="homeButtonText">Home</p>
</div>

I have tried:

#homeButton{
height: 50px;
width: 125px;
background-color: lightblue;
display: inline; /*New Line of Code*/
}

When I use that, it doesn't make the div's line up, instead takes away the light blue color.

Upvotes: 0

Views: 618

Answers (1)

NewToJS
NewToJS

Reputation: 2772

Change your CSS and use display:inline-block; I could also recommend using class rather than id as you will want this style to apply to all the buttons in the menu. You should never use the same id more than once as the id is used to target a specific element.

If you want this to apply to all your menu buttons then I would do this...

.menuButton{
height: 50px;
width: 125px;
background-color: lightblue;
display:inline-block;
text-align:center;
}
    <div class="menuButton">
    <p id="homeButtonText">Home</p>
    </div>
    <div class="menuButton">
    <p id="aboutButtonText">About</p>
    </div>

You might want to swap the paragraph <p> tags for anchor <a href="link">Home</a> tags. Anchor tags come with some default styles so if you want to remove the underline you can do this using text-decoration:none; you might want to also use color:black; as it will display blue by default.

Upvotes: 1

Related Questions