Why Is the Two P-Tags Not Beside Each Other When the Screen Is Wide

Why is the two p-tags not beside each other when the screen is wide?

Flex is somewhat of a new property, as you highlighted before. It is pretty highly dependent upon your web browser so I will break it down for each of the major browsers:

Internet Explorer:
This feature only works with IE 10+ and in fact, it only has one type of syntax which is below:

display:flexbox;

Safari:
This feature only works with Safari 3.1+ and in fact.. uses the older versions of it:

display:box;

Chrome:
This feature works in two ways. First, versions 21+ can use the modern version which is:

display:flex;

Second, versions 20- can only use the older versions (just like Safari)

FireFox:
This is also works two ways. First, versions 2 through 21 use the old version (again, like Safari and Chromes Versions 20-). Second, versions 22+ will use the modern version(just as Chromes versions 21+).

Opera:
This only works with 12.1+ and also supports the modern version (same as Firefox's versions 22+ and Chromes versions 21+).

With that being said, you need to be very clear as to what browser you are using. To get a better comprehensive guide on the use of flex and flex boxes, I would highly suggest the Almanac, the page I have linked will give you a walk through with the basics.

CSS: two side-by-side p tags, same height, left one fixed-width & known height

There are several ways to skin this cat. If I'm understanding what you're after correctly, I think that using table-row and table-cell display properties may be the easiest way to go.

Here's a jsfiddle:
https://jsfiddle.net/s2jzh31z/2/

That includes the following,
HTML:

<ul>
  <li>
    <p class="category">Something (known width)</p>
    <p class="description">Something long and multiple lines.
        Shouldn't wrap underneath category. 
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi. 
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.</p>
  </li>

  <li>
    <p class="category">Another thing(known width)</p>
    <p class="description">Something to the right,
      determines the height of this "<li>"</p>
  </li>

</ul>

CSS:

ul {
    margin: 0;
}

li {
    clear: both;
    display: table-row;
    width: 100%;
}

p {
    display: table-cell;
    padding: .5em;
    vertical-align: top;
}

p.category {
    width: 128px;
}

I took the liberty of vertical aligning and adjusting the padding a bit to make it look neater. The vertical align was one of the benefits I was looking for in using the table-row / table-cell approach.

Placing two p elements next to each other with a width of 50%

Use flex on the parent:

.content-wrapc {  /* add this */  display: flex;}
#footer-a {  width: 50%;  background: black;}
#footer-b {  width: 50%;  background: blue;  text-align: center;}

<div class="content-wrapc">  <p id="footer-a"> Footer </p>  <p id="footer-b">    <a href="#">test 1</a>    <a href="#">test 12</a>    <a href="#">test 13</a>  </p></div>

Create img and p tag side by side with different sizes

There's a lot of problems going on with your code, starting with how your have named the tags. You have used the same ID for almost all the tags. Make use of classes not ID when you want to style more than one element with the same CSS styles. And give unique ID to individual elements which you want to style differently.
I've just taken out the relevant part of the code and modified a few things to demonstrate how the grid (Responsive) has been or could be implemented:

• Instead of using img tags, use image as a background for the div containing it.
• Use vw units to create squares with the same dimensions and that makes it responsive itself.
• For the fonts as well, you can make use of vw units like shown below.
• Float the elements to the left and right depending on their unique ID.

Note: This is just a workaround to not implement this code from
scratch. But there are plenty of better and cleaner ways to achieve
this. You can make use of CSS grids or flexbox, etc for that matter.

function sorry() {  alert("This is just a example.")}

#wrapper{width:100%;}
.inner-content-wrapper {width:81vw;margin:0 auto;}
#inner-content1,#inner-content4 {  width: 20vw;  height: 20vw;  font-size: 1.3vw;  float:left;  border:1px solid gray;}
#inner-content4{float:right;}
#inner-content1,#inner-content2,#inner-content3,#inner-content4 {  display: block;  padding: 0;  margin: 0;}
#inner-content2 {  width: 60vw;  height: 20vw;  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg");  background-size:cover;  float:right;  border:1px solid gray;}
#inner-content3 {float:left;  width: 60vw;  height: 20vw;  border:1px solid gray;  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg");  background-size:cover;}

<div id="wrapper"><div id="inner-wrapper" class="cf">  <div class="inner-content-wrapper" class="cf">    <div id="inner-content1" class="cf">      <h2>Reservation</h2>      <br>      <p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>      <br>      <a onclick="sorry()">BOOK A TABLE</a>    </div>    <div id="inner-content2">    </div>  </div>  <div class="inner-content-wrapper" class="cf">    <div id="inner-content3">    </div>    <div id="inner-content4" class="cf">      <h2>Reservation</h2>      <br>      <p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>      <br>      <a onclick="sorry()">BOOK A TABLE</a>    </div>  </div></div></div>

Two inline-block elements, each 50% wide, do not fit side by side in a single row

Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.

---

When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).

So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Side by side divs not aligning

Add vertical-align: top to #left and #right.

#left {  text-align: center;  display: inline-block;  vertical-align: top;  width: 40%;}
#right {  text-align: center;  display: inline-block;  vertical-align: top;  width: 40%;  border-left: 2px double #cccccc;}
.container2 {  height: auto;  box-sizing: border-box;}

<div class="container2">  <div id="left">    <h4>Adress</h4>    238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com  </div>
  <div id="right">

    <h4>      Working hours    </h4>    Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br>
  </div></div>

H1 tag and P tag on the same line?

So if you had:

<div id="containerIntro">
    <h1>Headline</h1>
    <p>And here the text right after...</p>
</div>

Your CSS would have to look something like this:

#containerIntro h1,
#containerIntro p {
    display: inline;
    vertical-align: top;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
}

See http://jsfiddle.net/F3Bcd/3/.

Position 2 image tags next to each other

Floats should work just fine.... See this Fiddle

Note.. if you use uppercase characters for class assignments, you must match the case for the stylesheet in most cases.

---

Related Topics