0

Just registered and here is my first question already!

I have a HTML/CSS code like this:

.123 {
position: relative;
max-width: 30%;
left: 1%;

font-family: Arial, sans-serif;
font-size: 400%;
}

.456 {
max-width: 70%;
left: 30%;
position: relative;

font-family: Arial, sans-serif;
line-height: 200%;
}
<div class="123">
<b>This is a title</b>
</div>

<div class="456">
This is some text
</div>

My question is: the 123 div never is truly next to the 456 div. What could possibly be the reason?

Thank you!

t00nyy
  • 3
  • 2
  • Please see [ask]. This is an example of a question that was well covered a decade ago. You'll want to make searching your first step. – isherwood Sep 07 '21 at 21:29
  • @isherwood Hello, sorry for my mistake on the first go, I'll try searching first next time – t00nyy Sep 07 '21 at 21:38

1 Answers1

1

There are several things going on here that need work so I'll try to explain as much as I can.

  1. CSS selectors can't start with a number. You should rename your classes to something else with more meaning. Specifically it cannot start with a digit or with two hyphens. This why no styles are being applied to your markup.
  2. A div element is a block element which means they take up the entire width of their container. So if you put two consecutive div elements in the HTML they will not be side by side. They will be on top of each other.

My suggestion to get the elements next to each other is to put the text in a span tag. span elements are inline which means they take up only the amount of space they need. So you can put two next to each other on the same line.

<body>
  <span><b>This is a title</b></span>
  <span>This is some text</span>
</body>
Michael
  • 101
  • 4