Automatically adjust divs to fill available space

Question

Automatically adjust divs to fill available space

I've been grappling with a challenge involving my divs - how to translate my design seamlessly into the actual layout. Thus far, research and implementation have not yielded the desired results. In the link provided, you'll notice //PORTFOLIO followed by a red line extending to the content area's edge. Currently, I've assigned specific pixel widths to both the //PORTFOLIO and red line divs. However, I aim to have these divs auto-adjust their width - the first based on the //TITLE's space occupancy and the second to fill the remaining container space. This way, other sections of the website can replicate this functionality without the need for individual measurements. Any suggestions or insights are greatly appreciated. Thank you!

Check out an example here

css html width space

Answer 1

Answer №1

Take a look at: http://example.com/unique-link (adjust the width of your browser)

<div id="boxA">
    <div id="title">//My Portfolio</div>
    <div id="separator"></div>
</div>

#boxA {
    font-family: 'OpenSansRegular', Arial, sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    color: #FF5733;
    margin-bottom: 25px;
    letter-spacing: 5pt;
}
#title {
    float: left
}
#separator {
    overflow: hidden;
    height: 10px;
    border-bottom: 1px solid #ff5733;
}

Answer 2

Take a look at: http://example.com/unique-link (adjust the width of your browser)

<div id="boxA">
    <div id="title">//My Portfolio</div>
    <div id="separator"></div>
</div>

#boxA {
    font-family: 'OpenSansRegular', Arial, sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    color: #FF5733;
    margin-bottom: 25px;
    letter-spacing: 5pt;
}
#title {
    float: left
}
#separator {
    overflow: hidden;
    height: 10px;
    border-bottom: 1px solid #ff5733;
}

Answer 3

Answer №2

First and foremost, I must commend you on the aesthetic appeal of your website - it is both nice-looking and stylish! Moreover, I have a suggestion that might be of interest to you. By utilizing the display: table CSS property, you can achieve a solution; however, please note that adding an <hr /> element is essential as it is necessary for maintaining even cell heights:

<div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"><hr /></div>
</div>

#columnA {
  width: 400px;
  display:table;
}
#title {
  display:table-cell;
  width: 175px;
}
#line {
  display:table-cell;
  width: auto;
}
hr { 
  background-color: #C10000;
  height: 1px;
  border: 0;
}

To view a detailed example, please visit: http://jsfiddle.net/GmtMK/

Answer 4

First and foremost, I must commend you on the aesthetic appeal of your website - it is both nice-looking and stylish! Moreover, I have a suggestion that might be of interest to you. By utilizing the display: table CSS property, you can achieve a solution; however, please note that adding an <hr /> element is essential as it is necessary for maintaining even cell heights:

<div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"><hr /></div>
</div>

#columnA {
  width: 400px;
  display:table;
}
#title {
  display:table-cell;
  width: 175px;
}
#line {
  display:table-cell;
  width: auto;
}
hr { 
  background-color: #C10000;
  height: 1px;
  border: 0;
}

To view a detailed example, please visit: http://jsfiddle.net/GmtMK/

Automatically adjust divs to fill available space

Answer №1

Answer №2

Similar questions

Using CSS Clip Path to conceal elements

Innovative Audio Editing Tool using Javascript

What could be the reason behind the failure of this :after element?

Replicating radio button functionality using buttons in an HTML document

AngularJS | Using ngAnimate to Display Form Validation Errors

AngularJS - Unchecked radio button issue

Personalize scrollbar appearance in Mozilla Firefox and Internet Explorer

Having trouble centering an element with Bootstrap's offset feature in CSS

Animate photos with identical class names individually using CSS

Angular 2: Emptying input field value on click event

Steps for displaying a website within a specific Div using HTML

ng-click is not triggering my function

Hover without proper anchoring / move to section on click without anchor tag

Django informing me that the template is not found

What is the best way to incorporate text animation into a website using Cascading Style Sheets (CSS)?

Menu items on the responsive design are vanishing

Ways to verify login status on index.html

How can I make an HTML textbox in C# MVC flash a background color for one second using TextBoxFor?

What is the best way to extract data from several SQL tables and display it in an HTML/PHP table?

Is there a way to automate the uploading of captcha images to this solving service using Python?