Within the confines of a 400px wide div called "container", there are six left-floated "box" divs, each 100px wide. The combined width of the "box" divs exceeds 400px, resulting in the divs wrapping onto two lines, with 4 on the first and 2 on the second. How can I ensure all 6 divs remain on a single line without wrapping?
If you want to prevent line breaks on the child elements, you can use white-space: nowrap on the parent element and set display: inline-block on the children. Check out this live demo (click here) to see it in action.
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Here's the CSS code:
.container {
width: 400px;
background: black;
white-space: nowrap;
overflow: scroll;
}
.container > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
If you want to maintain the float: left property in your CSS code, be aware that the total width of your child divs should not exceed the width of the container. This limit includes any padding, margin, or borders applied to the elements.
To address your query succinctly, here are a few solutions:
An optimal approach is to utilize percentages:
To ensure that the children of a container flow horizontally, you should apply display: inline-block to them and also use white-space: nowrap. Here is an example of the necessary CSS:
#Container {
width: 400px;
border: 1px solid black;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inside {
width: 100px;
height: 300px;
border: 1px solid black;
display: inline-block;
}
Additionally, here is the corresponding HTML structure:
<div id="Container">
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>
For a visual representation and testing of the solution, you can check out this fiddle: http://jsfiddle.net/sgaurav/vZLWQ/
hopefully this provides assistance
style="display:inline-block";
Facing issues with a code base that was previously owned by someone else. Deadline is approaching fast and struggling to solve a particular issue. This code includes a table in the top section of the page, featuring a drop-down menu using CSS sprites for ...
Let's Think About It <div id="foo"> Lorem ipsum </div> <div id="bar"> sit amet </div> Is there a way to maintain the size of foo as it is while allowing bar to fill the remaining space on the page when the window size cha ...
I have two triangles displayed at the bottom of my page - one on the left and one on the right. The right triangle is currently transparent but I want to add a gradient effect to it. For the triangle-bottom-right, I'd like the gradient to go from rgb ...
I have been attempting to increase the padding of my view by utilizing the "px-5" class on the container within the view. However, I am struggling to achieve the desired amount of padding. What I am aiming for is padding similar to what is shown in this sc ...
I am facing a challenge with a table that has varying widths of content in each cell. I need the lengthy content to be displayed next to nowrap and overflow. After trying the solution mentioned here, all cells ended up with the same width. However, I requ ...
I'm experiencing an issue with my code where the CSS properties are not working properly when I wrap the code in suspense. The page loads and the suspense functions as expected, but the styling is not being applied. However, if I remove the suspense, ...
Here is my code snippet: <View style={{borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}> <Text>Hi</Text> </View> The result can be seen here: https://i.sstatic.net/C9ryl.jpg Unf ...
Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...
Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...
Incorporating idangerous vertical swiper with two slides in a mobile app through jquery mobile has proven challenging. Specifically, I am struggling to implement a vertical scroll bar in the second slide due to its fixed height and the potential collision ...
https://i.stack.imgur.com/TF51Z.gif https://i.stack.imgur.com/HHsax.png https://i.stack.imgur.com/HUztt.png When attempting to input text using document.getelement('').value="" , it doesn't behave as expected. The text disappear ...
I have a parent div containing 6 child divs. The height of the internal divs changes dynamically based on the data. The outer div has a fixed height set. I want the internal divs to move to a new column inside the parent div when they no longer fit in term ...
Currently, I am developing a sample react-to-print resume template to be included in a larger portfolio website. While testing the page on Chrome and Edge browsers on a laptop, everything seems optimized. However, there are issues when using Firefox; the b ...
My goal is to design a grid layout where each row can be divided into columns independently, similar to the example shown below: https://i.stack.imgur.com/VFPFq.png Here's the code snippet I have been experimenting with: .container { position ...
Something unexpected happened while I was working on a project with others. Last night, some files were edited and when I updated my subversion today, the nested divs seemed to have lost their hierarchy. I have been trying all day to fix this issue but wit ...
Recently, I've been delving into the world of CSS and trying out "display:inline-block" as an alternative to "display:float". The general consensus from documentation is that properties commonly used on block elements can also be applied to inline-blo ...
I'm struggling to add a moving bar to my website's navigation and need some help. I tried following a tutorial at the following link: (http://css-tricks.com/jquery-magicline-navigation/) Here is what I ended up with: If anyone could take a look ...
I have implemented a grayscale effect for an image using the following CSS code snippet: img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\&apo ...
Has anyone successfully changed the width of the ASP.NET file uploader? I attempted by adding the CssClass, but it did not work. Is there an alternative method to adjust the width? Thanks in advance. ...
I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match i ...