CODEWITHSUNDEEP
htmlcss
wlodekDev
wlodekDev

Reputation: 33

<p> tag displayed inline, below two floating divs

I have two divs: 'Div 1' and 'Div 2'. 'Div 1' has to be on the left side, 'Div 2' on the right side, both of them in the same line, and nothing between them.

Below I have two p tags: 'p 1' and 'p2'. I need to style them inline, next to each other, but they have to stay below the divs.

I have no problem with style divs. I can use float: left for 'Div 1' and float: right for 'Div 2'. The problem is with p tags. I am trying to use clear: both property but it does not work in this case. My p tags are floating next to 'Div 1', instead to stay below divs. How can I style p tags to stay inline, below the divs?

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#first-div {
    float: left;
}

#second-div {
    float: right;
}

p {
    clear: both;
    width: 80px;
    border: 2px dotted red;
    display: inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="first-div">Div 1.</div>
    <div id="second-div">Div 2.</div>
    <p>p 1</p>
    <p>p 2</p>
</body>
</html>

Upvotes: 1

Views: 401

Answers (2)

Masoud Keshavarz
Masoud Keshavarz

Reputation: 2234

div#first-div,  div#second-div{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#first-div {
    float: left;
}

#second-div {
    float: right;
}

p {
    width: 80px;
    border: 2px dotted red;
    display: inline;
}

.clearBoth{
  clear:both;
}
<div id="first-div">Div 1.</div>
<div id="second-div">Div 2.</div>

<div class="clearBoth">
  <p>p 1</p>
  <p>p 2</p>
</div>

Upvotes: 0

sol
sol

Reputation: 22929

You could wrap the divs. Then use a pseudoelement with the clear property.

As per @Scoots comment, there may be an advantage to using display: table instead of display: block as clearfix.

.wrapper>div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.wrapper::after {
  display: block;
  content: '';
  clear: both;
}

#first-div {
  float: left;
}

#second-div {
  float: right;
}

p {
  width: 80px;
  border: 2px dotted red;
  display: inline;
}
<div class="wrapper">
  <div id="first-div">Div 1.</div>
  <div id="second-div">Div 2.</div>
</div>
<p>p 1</p>
<p>p 2</p>

update as per comment

You could use a :before pseudoelement on the <p> immediately following the second div. This has the disadvantage of breaking up the border however.

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}


#first-div {
  float: left;
}

#second-div {
  float: right;
}

#second-div + p::before {
  content: '';
  display: block;
  clear: both;
}

p {
  border: 2px dotted red;
  width: 80px;
  display: inline;
}
<div id="first-div">Div 1.</div>
<div id="second-div">Div 2.</div>
<p>p 1</p>
<p>p 2</p>

Upvotes: 4

Related Questions