`The problem of div width error``

I am trying to display two divs side by side with a width of 50% each. Below these two divs, there is another div with a full width of 100%.

Check out my code below:

<div class="col_1_2"></div>
<div class="full-description">description</div>
<div class="col_1_2"></div>
<div class="full-description">description</div>

.col_1_2 {
   float:left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:50%;
 }

.full-description {
   width: 100%;
}

The issue I am facing is that the 'full-description' div is not aligning perfectly below the ".col_1_2" div.

This is what I am aiming for:

Thank you for your assistance!

htmlcss

Answer №1

To achieve that specific layout using floats, you would need to adjust the structure.

And remember to clear the floats afterwards.

.col_1_2 {
   float:left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:50%;
    height: 100px;
    background: lightblue;
    margin-bottom: 10px;
    border:1px solid grey;
 }

.full-description {
    height: 50px;
    background: grey;
    margin-bottom: 10px;
    clear:both;
    
}
<div class="col_1_2"></div>
<div class="col_1_2"></div>
<div class="full-description">description</div>
<div class="full-description">description</div>

<div class="col_1_2"></div>
<div class="col_1_2"></div>
<div class="full-description">description</div>
<div class="full-description">description</div>

Answer №2

The reason for this issue is the presence of line breaks after each DIV tag, which are treated as spaces. To resolve this problem, it's best to remove these line breaks. You can try implementing something similar to the following code snippet:

<div class="col_1_2"></div><?php
?><div class="full-description">description</div><?php
?><div class="col_1_2"></div><?php
?><div class="full-description">description</div>

Make sure to adjust the code according to your preferred programming language

Answer №3

insert this code snippet after each row

      <div class="clearfix"></div>

then apply the following styling:

      .clearfix {
            clear:both;

         }

additionally, float this element to the left:

     .full-description {
       float:left;
       width:100%;
       }

hopefully, this solution will be effective

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 advisable to include cursor:pointer in the pseudo class :hover?

Which option is better to use? .myclass { cursor: pointer; } or .myclass:hover { cursor: pointer; } Is there a notable difference between the two? ...

csspseudo-class

Nested Divs in CSS

I'm really struggling to get a div to display under another div in the way they usually do. Currently, I am using MaterializeCSS for my layout setup: <div class="container valign-wrapper"> <div class="customClass"></div> &l ...

cssmaterial-designflexboxmaterialize

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

JavaScript failing to retrieve JSON information from PHP

I seem to be encountering an issue when trying to read JSON data that I create in PHP and send back to my JavaScript. The problem is puzzling me. Here's the PHP code: header("content-type: text/json"); curl_setopt($ch,CURLOPT_URL, $url); curl_setop ...

phpjavascriptjqueryhtmljson

When an element is appended, its image height may sometimes be mistakenly reported as

I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class. For example: if the image is portrait orientation, set container width to 100%. If it's ...

javascriptjqueryhtmlcss

Maximizing space efficiency in Bootstrap 5

Hello there I have a query; I am currently utilizing Bootstrap 5 for my website, and it's working well. However, I would like Bootstrap to fill the entire page instead of just 80%; (Refer to image) https://i.sstatic.net/Iswmu.jpg <head> ...

htmlcssbootstrap-5

An error occurred while validating with JQuery AJAX: Undefined object does not contain any properties

Apologies for the premature post... Encountering an error after clicking the SUBMIT button: Error Log TypeError: undefined has no properties [More information] jquery.validate.min.js:4:22946 a.ajax https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/ ...

jqueryhtmlajaxforms

Invert the motion within a photo carousel

Is there anyone who can assist me with creating a unique photo slider using HTML, CSS, and JS? Currently, it includes various elements such as navigation arrows, dots, and an autoplay function. The timer is reset whenever the arrows or dots are clicked. Ev ...

javascripthtmlcss

Is there a way for me to display a gif similar to 9GAG on my

I'm looking to implement a feature on my website that allows me to pause and play a gif, similar to the functionality on 9gag. Can anyone provide guidance on how I can achieve this? I understand that I need to use both .jpg and .gif files, but my at ...

javascriptjqueryhtmlcss

Employing useEffect within Material-UI tabs to conceal the third tab

At the page's initial load, I want to hide the first two tabs. The third tab should be visible with its content displayed right away. Currently, I can only see the content after clicking on the third tab. To troubleshoot this issue, I attempted to use ...

javascripthtmlreactjsreduxreact-hooks

What is the best approach for testing an HTML element that does not have distinct attributes?

Currently, I am utilizing Coded UI Test to conduct tests on a web application. In my workflow, I rely on a class called Locator to store specific information necessary for CUIT to locate a control. When it comes to interacting with a control, a page objec ...

htmlcoded-ui-tests

Running a Python script through a Javascript event

I'm looking to enhance my webpage by implementing a feature where users can generate a personalized QR code with the click of a button. My current setup involves a Python script that creates the QR code image and saves it as a .png file. I want to int ...

javascriptphppythonhtmldjango

Tips for utilizing the Ace editor validator without the need to create a new Ace editor instance

In my React application, I utilize react-ace to build a CSS text editor. The implementation looks something like this... import Ace from 'react-ace' ... <Ace mode="css" value={value} onChange={onValueChange} onValidate ...

javascriptcssreactjsace-editorreact-ace

Bootstrap CSS: arranging columns for mobile devices

UPDATE: Having implemented the solution provided in the accepted answer below, I find myself back at square one with the original layout before any adjustments were made. The issue still remains unresolved. Any advice on how to achieve the desired design o ...

htmlcsslayoutresponsive-designtwitter-bootstrap-3

Tips for preventing Uncaught SecurityError: Blocking a frame with origin in phonegap

I'm in the process of developing a phonegap application that serves as a miniature browser for a client's website. This app will allow the client's customers to access their favorite pages with ease. Once a user selects a favorite, it will b ...

javascripthtmlcordovaiframe

Display extensive text content in HTML for mobile devices

As I work on developing a web app, specific requirements must be met: Pages that can dynamically load large amounts of text (around 30-100 printed pages) in HTML using $.ajax based on complex functions The complete text must be loaded upfront and cannot ...

htmljquerydomweb-applicationsrendering

Is it possible to modify a website's CSS permanently using just the browser?

Is there a way to make changes to CSS in a large project using Firefox's built-in developer tools and have them saved permanently? I've been trying to edit the style sheets, but couldn't locate the specific property I needed. Since I can&apo ...

htmlcssfirefoxfirefox-developer-tools

"Steady layout of grid for the navigation bar and

Currently, I am in the process of developing a control panel with the use of HTML and CSS. To structure the page, I opted for a grid layout. However, I encountered an issue where the navbar and sidebar do not stay fixed on the screen despite trying various ...

javascripthtmlcss

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

javascripthtml