Mastering the art of using div boxes in boxing form

When I box in information using divs, I've noticed that sometimes the wrapping boxes don't fill out the space completely. This can result in elements from other wrappers encroaching into the box area.

For example:

<div>
 <div style="length:150px;">my info1</div>
 <div style="length:50px;">my Info2</div>
</div>

Consider this example:

.topic {
  width: 500px;
  background-color: green;
  display: block;
}
.topic .tInfo {
  float: left;
  width: 460px;
  background-color: blue;
}
.topic .tName {
  width: 460px;
  background-color: brown;
}
.topic .tTime {
  width: 460px;
  background-color: lime;
}
.topic .tUImgLnk {
  width: 40px;
  height: 40px;
  float: left;
  position: relative;
  background: red;
}
.topic .tUImgLnk .tUImg {
  margin: 0px auto;
  display: block;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
}
<div class="topic" data-reactid=".24rl768raww.$0">
  <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
      <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
    </a>
  </div>
  <div class="tInfo" data-reactid=".24rl768raww.$0.1">
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
    </div>
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
    </div>
  </div>
</div>
<div class="topic" data-reactid=".24rl768raww.$0">
  <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
      <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
    </a>
  </div>
  <div class="tInfo" data-reactid=".24rl768raww.$0.1">
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
    </div>
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
    </div>
  </div>
</div>

I have been using <br style="clear:both"/> at the end of each wrapper box, but I'm not sure if it's the best approach. Is there a better alternative?

htmlcss

Answer №1

The reason for this issue is the absence of a wrapper and the excessive use of floating elements;

In order to resolve it, I have enclosed your elements within rows using the article selector and cleared the floats:

.topic {
  width: 500px;
  background-color: green;
  display: block;
}
.topic .tInfo {
  float: left;
  width: 460px;
  background-color: blue;
}
.topic .tName {
  width: 460px;
  background-color: brown;
}
.topic .tTime {
  width: 460px;
  background-color: lime;
}
.topic .tUImgLnk {
  width: 40px;
  height: 40px;
  float: left;
  position: relative;
  background: red;
}
.topic .tUImgLnk .tUImg {
  margin: 0px auto;
  display: block;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
}
article:after {
  content: "";
  display: table;
  clear: both;
}
<article>
<div class="topic" data-reactid=".24rl768raww.$0">
  <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
      <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
    </a>
  </div>
  <div class="tInfo" data-reactid=".24rl768raww.$0.1">
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
    </div>
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
    </div>
  </div>
</div>
<article>
</article>
<div class="topic" data-reactid=".24rl768raww.$0">
  <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
      <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
    </a>
  </div>
  <div class="tInfo" data-reactid=".24rl768raww.$0.1">
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
    </div>
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
    </div>
  </div>
</div>
</article>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the selected option from the dropdown menu in the specified form

What should I do if I have numerous products and want users to be able to add new dropdown boxes dynamically? When the submit button is clicked, only the value of "category[]" within the form should be retrieved. https://i.stack.imgur.com/v1fnd.png Below ...

javascriptphpjqueryhtmllaravel

Image not appearing on basic HTML website

This particular issue has left me completely puzzled. After removing all the unnecessary elements from a problematic website, I am now left with an extremely basic and minimalistic site: <!DOCTYPE html> <html lang="en"> ...

htmlimagemarkup

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

htmlcssflexbox

Add a new string to a class within a Vue.js component

Hey there, currently working on a Vue component where I am iterating through a list of countries. Here's how it looks: <div v-for="i in countries" :key="i.id"> {{i.name}} <span class="flag-icon-gr"></span> I want to dynamically ...

cssvue.jsnuxt.js

Slideshow through each item using Typescript and Angular8

I came across a solution in this carousel on by one link, but I'm struggling to work with the jQuery code even though I have JQuery installed in my project. For example: const next = jQuery(this).next(); I am looking to convert the JQuery code from ...

jquerycssangulartypescriptcarousel

Button for toggling the mobile navbar in Bootstrap

Is there a way to adjust the position of the navbar-toggle button http://prntscr.com/5sldgb within the navbar after changing its height? Here is the HTML code: <div class="navbar navbar-default"> <div class="container"> ...

htmlcsstwitter-bootstrapmobilenavbar

A guide on applying color from an API response to the border-color property in an Angular application

When I fetch categoryColor from the API Response, I set border-left: 3px solid {{element.categoryColor}} in inline style. Everything is functioning correctly with no development issues; however, in Visual Studio, the file name appears red as shown in the i ...

htmlcssangulartypescript

When removing the class "img-responsive" from an image, the bootstrap columns begin to overlap

Just starting out with Bootstrap while working on an Angular2 project and I have a question. Currently, I have a map-component taking up 3 columns on the left-hand side, but every time I resize the browser, the image also resizes. I want the image to rema ...

htmlcsstwitter-bootstrapangularangular-ui-bootstrap

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

Changing the Style Sheets on the Fly

I have designed a grid of 5x5 boxes. My goal is to be able to click on a link and have that specific link change color after it has been clicked (a:visited) - one at a time. Unfortunately, my current code changes the color of all the links instead of just ...

jquerycssdynamichyperlink

The issue with IE-9 is that it is mistakenly picking up the placeholder value as

My HTML code looks like this: <input id="SLOCriteriaOtherText" name="SLOCriteriaOtherText" style="width: 100%;" type="text" data-role="autocomplete" placeholder="Enter name for 'other' metric..." class="k-input" autocomplete="off" role="textb ...

javascriptjqueryhtmlinternet-explorer

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

What is the method for pulling information from MySQL and presenting it on a website using Node.js?

Currently, my goal is to retrieve data from MySQL and showcase it on my HTML page. The code snippet in server.js looks like this: const path = require('path'); const express = require('express'); const bodyParser = require("body-pa ...

javascripthtmlmysqlnode.jsexpress

The content on my HTML webpage exceeds the width of the screen on mobile devices and certain PCs

I've exhausted most of the solutions available online, yet I haven't been able to resolve the issue. The content on my webpage is appearing wider than the screen size on mobile devices and some PCs URL: html, body,{ max-width: 100%; ...

htmlcssresponsive-designoverflow

What is the best way to eliminate a specific set of characters from a string using TypeScript?

Imagine you have the following lines of code stored in a string variable: let images='<img alt="image1" height="200" src="image1.jpg" width="800"> <img alt="image2" src="image2.jpg" height="501" width="1233"> <img alt="im ...

htmltypescript

Exploring the world of colored tab links in CSS

Check out this code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Unique Page</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" /> ...

jquerycsstabsuicolortextcolor

Optimal placement and size for the slick slider

I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...

javascriptjqueryhtmlcss

The remaining visible portion of a viewport is equivalent to the height of an element

Is there a way to dynamically set a div's height so that it expands from its starting position to the end of its parent div, which is 100% of the viewport minus 20 pixels? Here is an example of how you can achieve this using jQuery: $(document).read ...

javascriptjqueryhtmlcss

text/x-handlebars always missing in action

I'm currently working on my first app and I'm facing an issue with displaying handlebars scripts in the browser. Below is the HTML code: <!doctype html> <html> <head> <title>Random Presents</title> ...

javascripthtmlember.jshandlebars.js

Display hidden text upon clicking using React Material UI Typography

I have a situation where I need to display text in Typography rows, but if the text is too long to fit into 2 rows, ellipsis are displayed at the end. However, I would like to show the full text when the user clicks on the element. I am attempting to chang ...

javascriptcssreactjsmaterial-uitypography