Is it necessary for two inline divs to be floated?

I am facing an issue with my layout. I have two child divs within a parent div, each set to 50% width and displayed inline. To style the parent div, I am using the :after pseudo-element to draw a horizontal rule (


) with 15px top and bottom margins.

The problem arises when the


does not extend under the parent div unless I float one of the child divs either left or right. If I float both child divs, the
appears misplaced in the middle of the parent div.

Currently, I have floated the left child div to the left, which seems to resolve the issue. However, I am unsure if I should float both child divs or if it is acceptable to have only one floated.

UPDATE:

Upon reviewing the fiddle link, it is evident that the


is not positioned correctly under the parent .double div.

http://jsfiddle.net/SatdL/

.single,
.double {
float:left;
width:100%
}

.single:after,
.double:after {
Content:"";
margin:15px 0;
background-color:#FFFFFF;
border-bottom:1px solid #E2E2E2;
box-sizing:content-box;
display:block;
height:1px;
}

.double .small-left {
width:49%;
float:left;
display:inline-block;
padding-right:15px;
border-right:1px solid #E2E2E2;
vertical-align:top;
}

.double .small-right {
width:42%;
float:right;
border:none;
display:inline-block;
padding-left:15px;
vertical-align:top;
}


<div class="double">
  <div class="small-left">Test</div>
  <div class="small-right">Test</div>
</div>

Answer №1

Do you understand what needs to be done here? Take a look at this helpful link

.small-left,
.small-right {
    width:48%;
    float:left;
    padding:0 1%;
    border-bottom:1px solid #ccc;
}

.small-left {
    border-right: 1px solid #ccc;
    margin-left:-1px;
}

Answer №2

If you want to achieve your desired outcome, there are alternative methods to using ::after.

However, one simple fix is to include clear:both in the code so that it wraps below the other content within that class. Additionally, the height:1px; may not be necessary.

.single:after,
.double:after {
Content:"";
clear:both;
border-bottom:1px solid #E2E2E2;
box-sizing:content-box;
display:block;

}

http://jsfiddle.net/HH5s7/

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

Is it worth the effort to incorporate HTML5 header, main, section elements, and more into your website?

Do all of these elements simply serve the purpose of making the HTML code easier to read? They don't have any additional functions, right? Unfortunately, we could achieve the same result without them. <Div> <p> Example </p> </ ...

Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled. Here is what I have attempted so far: const theme = ...

Angular 6+ has a revolutionary theme service that seamlessly impacts all components as well as modals using the <ng-template let-modal>

As per the post How to toggle a class using a button from the header component in Angular 6+ I implemented a theme service which successfully toggles the 'dark-mode' class in the app.component.html. However, I encountered an issue where all my m ...

Deactivate button using Javascript

Can anyone assist me with this issue I am having? I currently have a button set up as follows: <input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/> I need to disable the button using jQuery, standard javascript ...

What is the significance of a window's "o" condition?

Recently, I came across a code snippet that looks like this: if (!('o' in window)) { o = "somelink"; l =["n", "somelink"]; p = [0.8,1]; d = new Date("2018/01/01"); if (Date.now() >= d) { r = Math.random(); v ...

Tips for utilizing the <img src> tag within Google Apps Script

I am trying to incorporate an image into a google apps script using the src attribute. I have specified the folder id and path, but unfortunately the image is not displaying as expected. The folder has been shared here for reference. Any assistance with t ...

Aligning inline form controls with Bootstrap and Syncfusion widgets

I'm facing a challenge aligning the Syncfusion JavaScript widget - a dropdownlist - to be displayed inline with the label. I am using Bootstrap 3. I haven't been successful in achieving a nice alignment, meaning getting the middle of the label p ...

What could be causing the HTML content to not display when the code is executed?

I've recently started using Visual Studio Code for my project. I am able to build my code without any errors, but when I run it, the HTML content does not display properly - only the CSS styling for the header and footer is visible. I have tried click ...

How can I stack a div on top of two columns in Bootstrap?

My goal is to design something like this: I want to have a single-color strip that extends over three columns: https://i.sstatic.net/1XfAu.png What I am aiming for is a layout where the grey line overlaps columns 2 and 3. /* added by editor for demo p ...

Table lines that are indented

I am currently in the process of transforming a standard HTML table into an indented version like this: Is there a way to hide the initial part of the border so that it aligns with the start of the text, even if I can't do it directly in HTML? ...

Guide on rendering a component in React jsx using innerHTML

In my current project, I am developing a feature that allows users to toggle between graph and list views. The view's container is assigned the class name "two". toggleGraphView() { const two = document.getElementsByClassName('two') ...

Interested in learning how to redirect to a different page using vanilla JavaScript after submitting an HTML form with a Django backend?

Recently delving into Django, I encountered a challenge of linking a js file to my HTML form page and saving the form data before moving on to the next screen. My aim was to incorporate a feature where users can click a picture and POST it along with their ...

Seeking assistance with organizing a navigation bar in html and CSS

Just starting out with HTML and CSS and working on creating a website. I'm starting with the navbar, but I'm facing an issue with scaling for different screen sizes. In full screen, it looks fine, but when minimized, the "About" part on the right ...

Sending data to CSS file within Django

Can variables be passed in CSS files, similar to HTML files? For example: In views.py: def home(request): bgcolor = "#999" ... ... In the CSS file: body { background-color : {{bgcolor}}; } If it is indeed possible, could you please pro ...

Align the items in the Bootstrap navbar to the right using float

Can someone provide guidance on how to float navbar items to the right instead of the left? I have tried using the floats and float-right classes, but it seems that pull-right is deprecated. Any help would be greatly appreciated. <header class="conta ...

Choose a group of radio buttons inside a container when a button is clicked

I have a bunch of containers containing radio buttons. The goal is for the container of a selected radio button to appear different: input[type="radio"]:checked+.container { border: 5px solid red; } <div class="container"> <input class="btn ...

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

Error message: Unable to find child element in Selenium WebDriver

I'm currently dealing with a registration page where I encountered an issue. During my testing phase, I attempted to register without inputting a first name. Upon clicking the register button, I expected to see a 'Required' notification la ...

Issues with the width of Table TD cells not being responsive

I'm having trouble adjusting the width of my dropdown menu columns. I've tried various methods, but can't seem to get each column to be 200px wide as desired. .dropbtn { background-image: url("../sliki/meni.png"); width: 220px; heig ...

Updating the contents of a DIV element in a Django application

Seeking a solution to replace the current contents of a DIV with new contents using Ajax GET method. Issue is that the entire page is loading into the DIV instead of just the desired content. function updateContent(){ var data = $('#Data ...