Ways to assign dynamic widths to inner divs within a parent div automatically

Question

Ways to assign dynamic widths to inner divs within a parent div automatically

I am working with divs

<div id='top' >
    <div id='top-border' > </div>
    <div id='top-menu' > <jdoc:include type="modules" name="top-menu" style="well" /></div>
</div>

and adjusting styles

#top {
    width:100%;
    height:40px;
    overflow: hidden;
}
#top-border {
    background: url(../images/border.png) repeat-x scroll 0px 18px;
    position: relative;
    /*width:74%;*/
    height:40px;
    float:left;
    overflow: hidden;
}
#top-menu {
    margin:0;
    float:right;
    height:40px;
    padding-top:6px;
}

My challenge is making the content in top-menu adjust its width automatically based on its content. The remaining width should be allocated to top-border, which has a background image. Although setting a fixed width for top-border works well, I require a flexible width instead. Any suggestions or ideas?

html css

Answer 1

Answer №1

One alternative method is to utilize a table with a width of 100% instead of an outer div. By replacing the top-border and top-menu with td elements, you can achieve the desired effect. To style the top-border td, use the CSS properties "width: 1px; white-space: nowrap;"

Answer 2

One alternative method is to utilize a table with a width of 100% instead of an outer div. By replacing the top-border and top-menu with td elements, you can achieve the desired effect. To style the top-border td, use the CSS properties "width: 1px; white-space: nowrap;"

Answer 3

Answer №2

In order to show a div with just a background image, you need to define a width for the element or add content to it.

Therefore, to display the #top-border div, you must either include some content in it or specify a width.

Answer 4

In order to show a div with just a background image, you need to define a width for the element or add content to it.

Therefore, to display the #top-border div, you must either include some content in it or specify a width.

Answer 5

Answer №3

To achieve the desired layout, you can utilize the CSS Property word-wrap in conjunction with the width attribute.

For a demonstration of the solution, please refer to this link.

HTML Code:

<div id="top">
    <div id="top-border">abc</div>
    <div id="op-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div>
</div>

CSS Code:

#top {
    width:100%;
    height:40px;
    overflow: hidden;
}
#top-border {
    background: url(../images/border.png) repeat-x scroll 0px 18px red;
    position: relative;
    /*width:74%;*/
    height:40px;
    float:left;
    overflow: hidden;
    width: 20px;
    word-wrap: break-word;
}
#top-menu {
    margin:0;
    float:right;
    height:40px;
    padding-top:6px;
}

I trust this information proves beneficial.

EDIT

If a dynamic width is required, consider this solution.

HTML Code:

<div id="top">
    <div id="top-border">The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. </div>
    <div id="op-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div>
</div>

CSS Code:

#top {
    width:100%;
    height:40px;
    overflow: hidden;
}
#top-border {
    background: url(../images/border.png) repeat-x scroll 0px 18px red;
    position: relative;
    /*width:74%;*/
    height:40px;
    float:left;
    overflow: hidden;
    width: 97%;
    word-wrap: break-word;
}
#top-menu {
    margin:0;
    float:right;
    height:40px;
    padding-top:6px;
}

This updated solution should address any concerns.

EDIT - 2

Take a look at this alternative approach, which adapts the box size based on its content rather than preset dimensions.

HTML Code:

<div id="top">
    <div id="top-border">The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. </div>
    <div id="top-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div>
</div>

CSS Code:

#top {
    width:100%;
    height:40px;
    overflow: hidden;
    display:table-row;
}
#top-border {
    background: url(../images/border.png) repeat-x scroll 0px 18px red;
    position: relative;
    /*width:74%;*/
    height:40px;

    display:table-cell;
}
#top-menu {
    margin:0;
    height:40px;
    padding-top:6px;
    background:green;
    display:table-cell;
}

Hopefully, this revised approach meets your needs.

Answer 6

To achieve the desired layout, you can utilize the CSS Property word-wrap in conjunction with the width attribute.

For a demonstration of the solution, please refer to this link.

HTML Code:

<div id="top">
    <div id="top-border">abc</div>
    <div id="op-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div>
</div>

CSS Code:

#top {
    width:100%;
    height:40px;
    overflow: hidden;
}
#top-border {
    background: url(../images/border.png) repeat-x scroll 0px 18px red;
    position: relative;
    /*width:74%;*/
    height:40px;
    float:left;
    overflow: hidden;
    width: 20px;
    word-wrap: break-word;
}
#top-menu {
    margin:0;
    float:right;
    height:40px;
    padding-top:6px;
}

I trust this information proves beneficial.

EDIT

If a dynamic width is required, consider this solution.

HTML Code:

<div id="top">
    <div id="top-border">The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. </div>
    <div id="op-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div>
</div>

CSS Code:

#top {
    width:100%;
    height:40px;
    overflow: hidden;
}
#top-border {
    background: url(../images/border.png) repeat-x scroll 0px 18px red;
    position: relative;
    /*width:74%;*/
    height:40px;
    float:left;
    overflow: hidden;
    width: 97%;
    word-wrap: break-word;
}
#top-menu {
    margin:0;
    float:right;
    height:40px;
    padding-top:6px;
}

This updated solution should address any concerns.

EDIT - 2

Take a look at this alternative approach, which adapts the box size based on its content rather than preset dimensions.

HTML Code:

<div id="top">
    <div id="top-border">The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. </div>
    <div id="top-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div>
</div>

CSS Code:

#top {
    width:100%;
    height:40px;
    overflow: hidden;
    display:table-row;
}
#top-border {
    background: url(../images/border.png) repeat-x scroll 0px 18px red;
    position: relative;
    /*width:74%;*/
    height:40px;

    display:table-cell;
}
#top-menu {
    margin:0;
    height:40px;
    padding-top:6px;
    background:green;
    display:table-cell;
}

Hopefully, this revised approach meets your needs.

Answer 7

Answer №4

It appears that the top-border div is unnecessary and should not be used for purely presentational purposes. Instead, consider adding a top border to the top-menu div or adjusting padding-top and background image styles. Floating the top-menu may cause it to only be as wide as its content, similar to using display: inline-block; or display: table.

With regards to your question, here is a simple solution without using an image (although you can incorporate one): http://codepen.io/pageaffairs/pen/ECFny

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>

<style media="all">
body {margin: 0; padding: 0;}

#top {
    width:100%;
    overflow: hidden;
    background: #f7f7f7;
}

#top ul {
    margin:0;
    list-style: none;
    float:right;
    position: relative;
    padding: 0;
}

#top li {
    margin: 0 0 0 20px;
    float: left;
}

#top li a {
    display: block;
    line-height: 40px;
}

#top ul:before {
    content:" ";
    height: 0;
    width:999em;
    right:100%;
    border-top: 2px dashed #000;
    position:absolute;
    top:19px;
}

</style>

</head>
<body>

<div id='top'>
    <ul> 
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
    </ul>
</div>

</body>
</html>

Answer 8

It appears that the top-border div is unnecessary and should not be used for purely presentational purposes. Instead, consider adding a top border to the top-menu div or adjusting padding-top and background image styles. Floating the top-menu may cause it to only be as wide as its content, similar to using display: inline-block; or display: table.

With regards to your question, here is a simple solution without using an image (although you can incorporate one): http://codepen.io/pageaffairs/pen/ECFny

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>

<style media="all">
body {margin: 0; padding: 0;}

#top {
    width:100%;
    overflow: hidden;
    background: #f7f7f7;
}

#top ul {
    margin:0;
    list-style: none;
    float:right;
    position: relative;
    padding: 0;
}

#top li {
    margin: 0 0 0 20px;
    float: left;
}

#top li a {
    display: block;
    line-height: 40px;
}

#top ul:before {
    content:" ";
    height: 0;
    width:999em;
    right:100%;
    border-top: 2px dashed #000;
    position:absolute;
    top:19px;
}

</style>

</head>
<body>

<div id='top'>
    <ul> 
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
    </ul>
</div>

</body>
</html>

Ways to assign dynamic widths to inner divs within a parent div automatically

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Newbie inquiries regarding the process of migrating a CRUD application to PhalconPHP

How can I design an avatar image within a button similar to Facebook's style?

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

Gone Without a Trace: Where Did the WP Admin

Can JavaScript be used to continuously monitor a window variable object in real-time?

How to position one element relative to another using CSS

The page background appears to be incomplete in its coloring

What is the best way to conceal a sticky footer using another element?

Submit data from one form to another form located within an iframe

Having trouble with SVG background image not displaying properly and positioning correctly?

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

Rendering images in Next.js version 10

Styling a Fixed Header in CSS/HTML - Scroll Effect

Overlapping Image Arrows with CSS Styling

When a div is covered by an if statement

AngularJS's support for html5mode on GitHub pages is now available

Dependencies in Scala.js for CSS styling

JS Issue with Countdown functionality in Internet Explorer and Safari

Change the class of an element only within the div that is directly below it

Creating a CSS grid with uniform row heights, each adjusting independently