Maximizing the width of a right-hand div while the left div remains a fixed size

Question

Maximizing the width of a right-hand div while the left div remains a fixed size

My challenge involves creating a layout with two div elements displayed as inline-block. I want the left div to have a fixed size, while the right div should fully span the remaining space on the same line without moving to the next line. Essentially, I need both divs to be on the same line, one fixed and the other spanning dynamically.

I attempted to showcase this in a JSFiddle, but unfortunately, the result is not what I intended as the divs appear on separate lines. Are there any CSS experts out there who have encountered and solved this issue before? http://jsfiddle.net/yT5Gc/1/

html css

Answer 1

Answer №1

Consider trying out the code snippet provided below:

HTML

<div id="wrapper">
    <div id="box1">
        Box 1
    </div>
    <div id="box2">
        Box 2
    </div>
</div>

CSS

#wrapper { width: 100%; }
#box1 { width: 200px; float: left; border:1px solid; }
#box2 { border:1px solid; }

View demo on jsfiddle

Answer 2

Consider trying out the code snippet provided below:

HTML

<div id="wrapper">
    <div id="box1">
        Box 1
    </div>
    <div id="box2">
        Box 2
    </div>
</div>

CSS

#wrapper { width: 100%; }
#box1 { width: 200px; float: left; border:1px solid; }
#box2 { border:1px solid; }

View demo on jsfiddle

Answer 3

Answer №2

To achieve the desired layout, you can use the following CSS:

#left {width:80px; float: left;background-color: yellow;}
#right {background-color: red;}

I utilized background colors to distinguish between the two divs. It is important to note that floats must be used instead of inline-block.

A tailored version of the code can be found in this updated fiddle: http://jsfiddle.net/SamanthaSmith/uR8Jh/6/

Answer 4

To achieve the desired layout, you can use the following CSS:

#left {width:80px; float: left;background-color: yellow;}
#right {background-color: red;}

I utilized background colors to distinguish between the two divs. It is important to note that floats must be used instead of inline-block.

A tailored version of the code can be found in this updated fiddle: http://jsfiddle.net/SamanthaSmith/uR8Jh/6/

Answer 5

Answer №3

Alright, I have the full script ready. Let's take a trip down memory lane: I initially wanted to write 2 columns using DIVs.

The key here is to specify the overflow attribute as hidden:

div {border: 1px solid red;}
#left {width: 120px; float: left;}
#right {width: 100%; overflow: hidden;}

You can check out the demonstration here: http://jsfiddle.net/yT5Gc/7/

Answer 6

Alright, I have the full script ready. Let's take a trip down memory lane: I initially wanted to write 2 columns using DIVs.

The key here is to specify the overflow attribute as hidden:

div {border: 1px solid red;}
#left {width: 120px; float: left;}
#right {width: 100%; overflow: hidden;}

You can check out the demonstration here: http://jsfiddle.net/yT5Gc/7/

Maximizing the width of a right-hand div while the left div remains a fixed size

Answer №1

Answer №2

Answer №3

Similar questions

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

Having difficulty locating the value in the input search field

Creating a responsive design with HTML and CSS that expands an image to hold additional text

Having trouble retrieving the object variable that begins with http

In HTML, specify that the height of both the `html` and

Top scroll button malfunctioning on this page

Using inline CSS to apply conditional styles to a component in React is a great way to customize the

Passing values between a JavaScript function and a PHP script - Here's how!

Increase or decrease a variable by 1 using jQuery

What css method is used for combining styles?

Tips for ensuring that 3 divs fill the height of their parent container

Output each uploaded file using jQuery's console.log function

What is the method for implementing tooltips using JQuery?

Issue with a "hover" effect on a specific input[type="submit"] button

Beginning of my initial endeavor (seeking feedback, general advice, criticism)

Is there a way to position my input at the bottom of its parent element?

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Layer one image on top of another using z-index

The primary division containing two inner divisions, one centered and the other positioned to the right

Encountering a problem with loading the stylesheet