Even if the width is not set to 100%, the div still breaks into a new row

Having an issue here.

I'm working with 2 divs that should be displayed side by side.

Both are enclosed in a div with max-width : n.

I set width: 70% to the first div and width: 30% to the second div, expecting them to fully occupy the parent div. However, the second div is breaking to a new line.

Check out this example on jsfiddle.

https://jsfiddle.net/u5aqhvmj/

UPDATE: Just focusing on finding a solution for this specific issue. I am aware of using floats but let's keep that aside for now.

htmlcss

Answer №1

Try applying float:left to both of the div elements

Update:

Your HTML code contains whitespace characters that are causing extra space to be taken up! The 30% + 70% widths, plus the space from the whitespace characters, adds up to more than 100%, which results in a line break

If you remove the spaces and put all the divs on a single line in your fiddle

<div class="firstQ"></div><div class="secondQ"></div>

there should not be a line break anymore

Answer №2

Instead of using the inline-block 4px reset hack, you can achieve the same result by utilizing flexbox:

.wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 400px;   
}

.first,
.second {
  height: 100px;
}

.first {
  background: red;
  -webkit-flex: 1 1 70%;
  -ms-flex: 1 1 70%;
  flex: 1 1 70%;
}
.second {
  background: blue;
  -webkit-flex: 1 1 30%;
  -ms-flex: 1 1 30%;
  flex: 1 1 30%;
}
<div class="wrapper">
    <div class="first">
    </div>
    <div class="second">
    </div>
</div>

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

Using Google Apps Script to invoke a JavaScript function from an HTML file

In my Apps script project, I am working on creating a Google chart that will appear in a modal above Google Sheets. I have ChartC.html: <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> ...

javascripthtmlgoogle-apps-scriptgoogle-sheetsgoogle-visualization

Tips for displaying an asp.net form using javascript functions

I am currently developing a login page in asp.net and have utilized a template from CodePen at http://codepen.io/andytran/pen/PwoQgO It is my understanding that an asp.net page can only have one form tag with runat="server". However, I need to incorporate ...

javascripthtmlcssasp.net

Tips for refreshing an element after modifying a data-* attribute

I have an element that has the following CSS style: #element:after { content: attr(data-percent); } In an attempt to change the data-percent attribute using jQuery, I used this code: $('#element').data('percent', '50%'); ...

javascriptjquerycssreflow

Ensure that the modal div has scroll functionality without affecting the background of the page

Website Link: Instructions: To view the 'Rates' section, simply click on it in the top navigation bar. When you click on 'Rates', two separate divs will appear on the screen. One div acts as the main background, while the other div co ...

htmlcss

Troubleshooting problem with image overlay alignment in Bootstrap 4 Card

I am currently utilizing Bootstrap 4 and am attempting to create a card-based layout for showcasing my stores. Within this design, I have a location marker that should appear over the store image with a 5-star rating positioned on the same line, floating t ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

css

Having trouble locating the CSS and JavaScript files within my Spring Maven project

I have a Spring framework application with a Maven project. In addition, I have CSS and JavaScript files under the WEB-INF folder. When attempting to link the JavaScript and CSS files like this: <link rel="stylesheet" href="../allDesign/js/vendor/anims ...

javascriptcssspringmavennetbeans

Looking to refine your search in materialize css/bootstrap when utilizing cards?

I recently embarked on a project to create an HTML page utilizing Materialize CSS and Bootstrap. My goal was to incorporate cards representing YouTube videos, along with a search bar that could filter through the cards and display the relevant one. However ...

javascripthtmlcssbootstrap-4materialize

Encountering Problem Importing HTML Table Data into R

I am looking to import the data table located at the bottom of a specific webpage into R, either as a dataframe or table. The webpage in question is . Initially, I attempted to utilize the readHTMLTable function from the XML package: library(XML) url <- ...

htmlrxmlweb-scraping

Is it possible that the HTTP module's deflate compression is only effective on specific CSS files and not all

I've been working on setting up mod deflate and gzip on my server, and while it's mostly functioning smoothly, I've noticed that not all files are being caught. It's not a matter of missing ALL javascript or CSS, but rather that some ar ...

cssapachecompressiongzipdeflate

Adding complex JSON format to an HTML table involves formatting the data correctly and then using

Utilizing AJAX, I fetched a JSON response and am now looking to map the JSON data into an HTML table structured like this: { "records": [{ "type_id": 000001, "type_desc": "AAAAAA", "type_createby": "Adam" }, { "type ...

javascriptjqueryhtmljsonajax

What are the best methods to activate grayscale and transition effects on Firefox and Internet Explorer?

In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I ...

css

Setting a page title using PHP based on a conditional statement can be achieved by

I am attempting to display a different title for each page In the header.php file, I am checking the file name to set the correct title like this <?php $page = basename($_SERVER['PHP_SELF']); if ($page == 'index.php'): ?> <ti ...

phphtml

Utilizing the Mouse Hover feature to target various <div id> elements within a single Vue.js function

I have created two div IDs in an HTML file where I have specified the mouseover property. <div id="app"> <img class="img-responsive img-full" v-bind:src="imgData" @mouseover="imgData = imgData_1"> </div> <div id="app1"> <img cl ...

htmlvue.jsvuex

Blazor Control in Razor Component Library (CSS Protection)

I recently created a new component named MyComponent.razor and included a corresponding CSS file called MyComponent.razor.css. The CSS file is nested under the component file in Visual Studio, so I am confident there are no spelling errors in the file path ...

cssblazorblazor-webassemblyrazor-class-library

Utilizing Angular for Webcam Integration

After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream =&g ...

htmlangulartypescriptvideogetusermedia

Effective ways of making mat-toolbar react to Angular modifications

For a while now, I've been struggling to create a simple header for the homepage of my web app using mat-toolbar. However, no matter what I try, I just can't seem to get it to display the way I want. Here's the code I've been working wi ...

htmlcssangular

rearranging the positioning of links in the HTML navbar

Is there a way to prevent other links in the navbar from moving up slightly when hovering over one link and creating a line (border bottom)? ` .n24{ margin-top: 2px; padding: 14px 14px; } .n25{ margin-top: 2px; padding: 14px 14px; } . ...

htmlcss

HTML tables with stripes and row spans

I found the initial table on this link. After reviewing the original table, I am looking to make modifications as shown in the highlighted image below. However, when attempting to add rowspan and colspan attributes to the td elements, I encountered an iss ...

htmlcsshtml-table

How can I prioritize my own stylesheet over Bootstrap in a React project where it is included in the index.js file?

In an attempt to customize the appearance of a Bootstrap component, I am creating my own stylesheet and importing it into my xyz.js file. Here is the setup: Xyz.js import React, {Component} from 'react'; import axios from 'axios'; imp ...

cssreactjs