CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 3197

cant get divs to display inline

Please see this pen for an example of my problem http://codepen.io/MarkRBM/pen/EmlJC

I cant get the 3 divs that say book now, subscribe, contact to display inline with the div with with the header and paragraph. I have been trying for a while and looking at learn layout.com. This is part of a larger project and I have tried to float it but it messes up the styling of everything else if I do that so I figured there must a way with inline block

edit I have updated the pen with the full scss file the css in question is on lines 866-894. There may be too much going wrong for you to figure it out and if so thats not a problem I will keep plugging away at it.

Upvotes: 0

Views: 97

Answers (3)

Jamie Niemasik
Jamie Niemasik

Reputation: 755

Yes, it's certainly possible, and you're on the right track. Just a few errors in the css:

First, .locinfo is inline-block, but it's inside .loc, which is not (so it's block by default) — so set .loc to inline-block as well.

You're also missing a semicolon after inline-block in the definition of .locbook, which is causing that rule to be ignored.

Without knowing exactly what you want the result to look like, I'm not sure if there's more that needs fixing. But those changes seem to get at least most of the way there.

Edit: more detail in response to comment:

.locinfo is alone by itself in its container, so set its width to 100% instead of 49%. The key is that this is the element's width as a percentage of its container. Its container (a .loc) has 49% of the page, so if you give .locinfo 49% of that, it will only have 24% of the page.

Similarly, set .locbook to 32%. Those three divs will then lie side-by-side in their container's 49% of the page.

Finally, set vertical-align: top on .loc and margin: 0 on .locbook, and you'll get everything nicely aligned to the top.

Upvotes: 1

art-fan-vikram
art-fan-vikram

Reputation: 315

you forgot to add semicolon after display:inline-block

.locbook{
  /*width: 49%;*/
  background-color: #3475b3;
  display: inline-block;
  vertical-align: top;
}

Upvotes: 1

MaKR
MaKR

Reputation: 1892

You might try switching them to spans. Div's are by default {display: block}, while spans are {display: inline}. Block elements cannot be placed on the same line as other elements. Inline elements' width cannot be specified however, in which case you'll want to style either div or span, whichever you choose (it doesn't really matter) to {display: inline-block}

Upvotes: 0

Related Questions