Programming & Software Q&A | CollectiveSolver

Disclosure: My content contains affiliate links.

How to display float box and content inside parent box as a container with CSS and HTML

70+ SQL courses for beginners and professionals

280 views

asked May 17, 2024 by avibootz
edited May 17, 2024 by avibootz

Share on

share on gp share on fb share on tw share on li share on re share via email

1 Answer

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>
<div class="box">
  <div class="float">float box</div>
  <p>content inside the container</p>
</div>
</body>
</html>

.box {
  background-color: rgb(145, 205, 239);
  border: 2px solid purple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

70+ SQL courses for beginners and professionals

answered May 17, 2024 by avibootz

Related questions

2 answers 306 views

306 views

How to create a box with CSS and HTML

asked Jun 18, 2023 by avibootz

4 answers 603 views

603 views

How to apply css to a <p> tag inside <div> tag with CSS and HTML

asked Jul 31, 2018 by avibootz

1 answer 370 views

370 views

How to set an HTML list to display in inline-block with CSS

asked May 22, 2021 by avibootz

1 answer 315 views

315 views

How to set the border style inside HTML tag with CSS

asked Feb 28, 2021 by avibootz

1 answer 360 views

360 views

How to prevent border change from HTML input field when clicking inside in CSS

asked Oct 7, 2020 by avibootz

5 answers 695 views

695 views

How to vertically align the grid inside the container in CSS

asked Jun 4, 2019 by avibootz

5 answers 761 views

761 views

How to align the grid inside the container in CSS

asked Jun 4, 2019 by avibootz

...