Home/ Questions/Q 8974329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T18:39:33+00:00

Is possible auto align in line 2 div without size ? The goal is

  • 0

Is possible auto align in line 2 div without size?
The goal is to get something like the image attached.

I can’t set percentages (80% and 20%) because the content is dynamic. I can’t use tables. Any idea?
Example: http://jsfiddle.net/hKRyG/

<html>
<head>
<style type="text/css">
.navbar {
    width: 500px;
    background: #ccc;    
    display:table;
}

.navbar .breadcrumb {    
    float:left;    
}

.navbar .breadcrumb ul {
    margin: 0;
    padding: 0;
}

.navbar .breadcrumb li {
    list-style: none;
    display: inline;
}

.navbar .navbutton {
    float: right;    
}
</style>
</head>
<body>
<div class="navbar">

<div class="breadcrumb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
    
<div class="navbutton">
    <input type="button" value="BUTTON" />
</div>

</div>
</body>
</html>

Thank you!

Image

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There you go! To align without defined size you must use table display properties

    .navbar {
    width: 500px;
    background: #ccc;    
    display:table;
}

.navbar .breadcrumb ul {
    margin: 0;
    padding: 0;
}

.navbar .breadcrumb li {
    list-style: none;
    display: inline;

}

.navbar ul{
    display: table-cell;
}

.navbutton {
    display: table-cell;
    vertical-align: middle;
}
    • 0