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

When using the <a> tag in an ASP.NET MVC view, the hyperlink may be missing

When utilizing ASP.NET MVC 5, I encountered an issue within my view where I am attempting to incorporate "Edit | Delete" functionality within a table. Strangely, I am able to generate a hyperlink for the Edit function, but not for the Delete function. Wit ...

htmljquerycssasp.net-mvc-5

Increase the space below the footer on the Facebook page to allow for an

I recently created a webpage at and noticed that it is adding extra height below the footer on my Facebook page: "" I am seeking assistance on how to remove this additional 21px height below all content in the footer. I have tried various templates but n ...

javascriptphphtmlcssfacebook

Stopping halfway through a jQuery toggle width animation to close again

Perhaps the question may be a bit unclear, but allow me to provide an example. When repeatedly clicking the button that toggles the width, the div continues to animate long after the button press, which is not visually appealing. My desired outcome is for ...

javascripthtmljquerycss

What is the best way to implement media queries for mobile phones and desktop computers?

I've come across similar questions before but still can't wrap my head around it. Here's my dilemma: I want the index page of my website to display in desktop layout on desktops and mobile jquery on mobile devices. Currently, I have set up m ...

javascriptjquerycssjquery-mobile

After closing a window in GXT, the Element will be removed using RootPanel's get(String id) method

I am working on a GWT project with the GXT framework, and I have an embed tag in my project.html as shown below: <embed type="application/nptta" width=100% height=100% id="testId"></embed> There is a formPanel that will use RootPanel.get("tes ...

htmldomgwtgetelementbyidgxt

ESLint error: EROFS read-only does not correspond to any directory

Can anyone help me with this issue? I am experiencing a problem when using Linux dual boot, but everything works fine when I use Windows. ERROR in [eslint] EROFS: read-only file system, open '/media/naufal/6878124278121004/Refactory/Skill-Test-Re ...

javascripthtmlcssreactjs

HTML5 Division Element Dimensions

I am currently modifying an HTML5 template. The default Bootstrap parameters were set as: col-sm-12 col-md-4 col-lg-4 col-sm-12 col-md-8 col-lg-8 This configuration allotted 20% of the screen width to text and 80% to images, but I want it reversed. Tex ...

csshtmltwitter-bootstrap-3

jQuery seems to have difficulty selecting the text of a hyperlink's element using the text() or html() methods

I have a <a href=#>Title</a> link and it's the content in between <a href="#"> attribute that I am trying to target but haven't been successful using either the text() or html() jQuery functions. The text() method is returning ...

javascriptjqueryhtml

I'm attempting to create a dropdown menu, but I'm struggling to keep it open when I hover over an option

Seeking assistance as a beginner in coding. I am struggling with creating a dropdown menu option on my website. The issue is that the menu closes whenever I attempt to move my mouse to select other options. It seems to work fine when using the run option h ...

htmlcss

When the HTML code is rendered in a web browser, the CSS styles are not being

I am utilizing adminer within a docker container. When testing services, I utilize the URL mydomain.tld. In order to interact with this container directly, one option is to expose and map a port, such as mapping port 8081 to the adminer port 8080. Access ...

cssdockerbrowseryawsadminer

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

javascriptjquerycss

The Python error message, "JSONDecodeError: Expecting value: line 1 column 1 (char 0)," indicates that there

What is causing this error to occur? Are there any alternative methods available for converting it into a json file? import requests import json url = 'https://finance.yahoo.com/quote/AMZN/balance-sheet?p=AMZN&.tsrc=fin-srch' r = requests. ...

pythonhtmljsonpython-3.xrequest

I recently edited my htaccess file to redirect my webpage, but now I'm facing issues with my CSS, images, and

Here is the htaccess code I am using: RewriteRule ^example1/([A-Za-z-]+)/?$ example2.php?name=$1 [NC] The page is loading, but the CSS and JS are not rendering correctly. Can anyone assist me in resolving this issue? ...

phphtmlcss.htaccess

Concerns with the dimensions of HTML thumbnails

view image description here I seem to be having an issue with the size of thumbnails on my website. The problem arises when a thumbnail with a long title is displayed, as it ends up taking up more space and affecting the layout. Is there a solution to ens ...

htmlcss

Is there a way to transform this JavaScript function into a jQuery plugin?

Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...

jqueryhtml

eliminate whitespace characters within a string

Here is a question that suggests an easy way to remove space characters in a string using R. However, I encountered an issue when trying to remove a space between two numbers (e.g. 11 846.4) while working with the following table: require(XML) require(RCur ...

htmlrregexlinuxstring

How to apply gradient colors to borders using CSS

Is it possible to create a simple border bottom color with a gradient effect? div{ border-bottom:10px solid linear-gradient(#FF4000, transparent); height:20px; width:auto; background:#ccc; } <div></div> ...

css

Extract CSS properties to generate a dictionary that maps class names to background images

Suppose my CSS looks like this: .featured .featured_1 { background-image: url("http://test.com/image.png"); margin-top:20px; } In that case, the following PHP function: function extractBackgroundImages($css) { if (!preg_match_all('/&bso ...

phpcssregex

Express Node + Styling with CSS

I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...

cssnode.jsexpress

Rendering of @font-face on Windows 7 was executed flawlessly

I have been utilizing @font-face to implement custom fonts on a website. The custom font displays correctly in Firefox, IE, Safari, and Chrome on Mac. However, when viewed on Chrome in Windows 7, the text appears green at 10px instead of black or grey. ... ...

cssgoogle-chromefont-faceembedded-fonts