Is it possible to stack divs horizontally in a liquid layout while allowing one of the widths to be dynamic?

This is the code snippet and fiddle I am working with: http://jsfiddle.net/hehUt/2/

<div class="one"></div>
<div class="two">text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here heretext here text here text here  text here text here text here text here text here text here text here re text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here heretext here text here text here  text here text here text here text here text here text here text here 
</div>​
.one {
    background-color: red;
    height: 75px;
    width: 75px;
    float: left;
}
.two {
    margin-left: 75px;
}​

I have managed to make the two divs sit next to each other in a flexible layout that utilizes all available space without text wrapping issues. The current setup works fine.

My concern arises when the width of div.one changes, as this would require adjusting the margin for div.two accordingly. Is there a more efficient way to handle this situation? For instance, if div.one's width is dynamically set by content coming from a CMS, leading to varying widths, is there a CSS solution that can adapt without needing manual margin adjustments for div.two? Your suggestions are appreciated. Thanks

csscss-float

Answer №1

To avoid overlapping, use the CSS property overflow: hidden; instead of adjusting the margin-left. Here is a small demonstration: view demo. By applying overflow: hidden;, it ensures that the element with class .two does not interfere with the floated element .one.

Answer №2

In my experience, the CSS property display: table-cell has been extremely valuable.

.container {
    display: table-row;
}
.box1 {
    display: table-cell;
    background-color: blue;
    height: 100px;
    width: 100px;
}
.box2 {
    display: table-cell;
}​

Answer №3

.first
{
     width:30%;
}

.second
{
     width:40%;
}

.third
{
     width:30%;
}

Does this meet your requirements?

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

Ways to ensure a ul li element perfectly fits inside a div element without any spaces

As a newcomer to CSS and HTML, I'm facing an issue with my ul li dropdown menu and login boxes. The background colors are red and blue, but there are gaps within the div that I want to fill with the height of the div. Below is the code snippet: @key ...

htmlcss

Exploring Unicode Symbols for Icon Selection

I'm currently working on integrating an icon picker into my application that will enable the user to select a mathematical operator for data comparison. While I have successfully implemented the fontawesome-iconpicker on the page, I am encountering d ...

javascriptcssunicodeiconsglyphicons

Using Special Fonts in Visual Studio 2013

Encountering a small issue with Visual Studio 2013. My application, developed using html and javascript, utilizes a custom font. When attempting to run the application on a different computer that does not have the font installed, it fails to display corr ...

htmlcssvisual-studio-2012

Compatibility of image maps with browsers and the usage of imagemapster

Currently, I am utilizing ImageMapster to make adjustments to an image map while hovering. However, I am facing challenges with both the image map itself and the ImageMapster plugin. The issues I am encountering are: 1) Despite specifying a height and wid ...

javascriptjqueryhtmlcssimagemapster

Using CSS3 translate will result in children becoming relatively positioned

I am facing an issue with a sidebar that contains 2 divs. <div class="sectionsContainer clearfix"><-- Sidebar --> <div class="leftSection pull-left"> <p>Maor</p> </div> <div class="rightSection pu ...

javascriptjqueryhtmlcss

Getting the most out of fonts with Webpack sass-loader

I recently set up a custom font in my project like this: $font-path: '~@/assets/fonts/'; @font-face { font-family: 'mainFont'; font-weight: 300; font-style: normal; src: url('#{$font-path}mainFont/mainFont.eot&apos ...

cssfontswebpackvue.jssass-loader

Tips for preventing overlap between two divs when utilizing position: absolute in CSS

In this CodePen link [https://codepen.io/anon/pen/qvQpaY], there is an issue with overlay between the two divs that have a class name of box-container. The black rectangle is being counted as the overall height by box-container because the red rectangle is ...

htmlcss

Need assistance with CSS layout: How to extend a div to the bottom of the page

I am currently working on a design layout that includes a 'header' section with a logo and links, as well as a content area that should extend to the bottom of the page. However, I am facing some challenges in achieving this. Initially, I enclos ...

csshtml

Phrases are truncated in the initial line of each ion-item within the ion-list

In Ionic 3, I am facing an issue with my ion-list where the first line inside each ion-item is getting cut off. Specifically, the capital 'A' letter is not entirely visible. Can anyone provide assistance with this? Thank you. Below is my code sn ...

cssionic-framework

Material-UI is having trouble resolving the module '@material-ui/core/styles/createMuiTheme'

Although I have searched for similar issues on StackOverflow, none of the solutions seem to work for me. The errors I am encountering are unique and so are the fixes required, hence I decided to create a new post. The company conducting my test provided m ...

javascripthtmlcssreactjsmaterial-ui

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...

cssangularoverlay

When scrolling, the text or logo inside the navbar seems to dance with a slight wiggling or

I recently implemented a code to create a logo animation inside my navigation bar that expands and contracts as I scroll, inspired by the functionality of the Wall Street Journal website. However, this implementation has caused some unintended side effects ...

javascriptjqueryhtmlcss

The issue with material-ui 0.15.2 is that it applies extra vendor-prefixed styles on the server side but not on the client side, resulting in warnings in React 15

I have set up my project with the following configurations: react is at version 15.2.1 material-ui is at version 0.15.2 I am using express and universal-router for server-side rendering Every time I include a material-ui component, I encounter this erro ...

cssreactjsmaterial-uiisomorphic-javascriptvendor-prefix

What is the best way to ensure that form inputs and labels stay aligned?

Let's consider a scenario where there is a web page containing a form: <form> <label for="FirstName">First:</label> <input name="FirstName" type="text"> <label for="MiddleName">Middle:</label> <input n ...

htmlcss

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

javascriptcssjquery

Creating linear overlays in Tailwind CSS can be achieved by utilizing the `bg-gradient

Is there a way to add a linear background like this using Tailwind CSS without configuring it in tailwind.config.js? The image will be fetched from the backend, so I need the linear effect on the image from bottom to top with a soft background. Here are ...

javascriptcssreactjsnext.jstailwind-css

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

htmlcssreactjsfrontendtailwind-css

Altering the backdrop upon hovering over an element

As a beginner in Javascript and Jquery, I am working on creating an interactive feature where hovering over one element changes the background image in another column. I have managed to write the function, but now I want to add an animation to the image tr ...

javascripthtmljquerycss

How to Use Jquery to Delete a Specific String

I've been attempting to remove certain strings from a string using Jquery, however it seems like the code isn't working and my variable remains unchanged. var classes = $("body").attr('class'); alert('.side-nav' + classes); c ...

javascriptjqueryhtmlcss

Incorporating a CSS stylesheet into the theme settings of the Stratus 2 Beta platform

I have been attempting to personalize my Stratus 2 Beta by implementing a custom theme. I created a separate CSS file named "stratus.css" and stored it in the CSS directory of my website - with the CSS code being identical to this example. Below is my Jav ...

javascripthtmlcssthemessoundcloud-stratus