You can use CSS3’s flexible box layout to do this pretty intuitively: .parent-div { display: flex; } .text-div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .icon-div { flex: 1; } Demo: http://jsfiddle.net/Blender/kXMz7/1/
You can’t do this directly, because floats are aligned to the top: If there is a line box, the outer top of the floated box is aligned with the top of the current line box. The exact rules say (emphasis mine): A floating box’s outer top may not be higher than the top of its … Read more
You should try using the Grid Template. Here’s what I’ve used for a two Column Layout of a <ul> <ul class=”list-group row”> <li class=”list-group-item col-xs-6″>Row1</li> <li class=”list-group-item col-xs-6″>Row2</li> <li class=”list-group-item col-xs-6″>Row3</li> <li class=”list-group-item col-xs-6″>Row4</li> <li class=”list-group-item col-xs-6″>Row5</li> </ul> This worked for me.
This will do the trick: #bars { display: table-cell; border: solid 1px black; } #bars > div { display: inline-block; vertical-align: bottom; width: 5px; background-color: #999; margin-left: 2px; } #bars > div:first-child { margin-left: 0; } It uses display: table-cell; on the parent div, which by default has vertical-align: baseline; applied. This changes the need … Read more
In bootstrap 4 use: <ul class=”nav navbar-nav ml-auto”> This will push the navbar to the right. Use mr-auto to push it to the left, this is the default behaviour.
Try removing the float:left and width:100% from .header-right — the right div then behaves as requested. .header { float: left; background: #efefef; background-repeat: no-repeat; width: 240px; height: 100px; } .header-right { overflow: hidden; background-color: #000; height: 100px; } <div class=”header”></div> <div class=”header-right”></div>
If you wrapped your divs, like this: <div id=”main”> <div id=”sidebar”></div> <div id=”page-wrap”></div> </div> You could use this styling: #main { width: 800px; margin: 0 auto; } #sidebar { width: 200px; height: 400px; background: red; float: left; } #page-wrap { width: 600px; background: #ffffff; height: 400px; margin-left: 200px; } This is a slightly different look … Read more
Change the order of the float, put it before the text like this: <div class=”btn-group”> <button data-toggle=”dropdown” class=”btn btn-default dropdown-toggle”style=”width: 400px;text-align: left;”> <span class=”glyphicon glyphicon-chevron-down” style=”float: right;”></span> Checked option </button> </div> http://jsfiddle.net/q05n5v4c/3/
Bootstrap 3 Using Bootstrap 3’s grid system: <div class=”container”> <div class=”row”> <div class=”col-xs-4″>Menu</div> <div class=”col-xs-8″> <div class=”row”> <div class=”col-md-4 col-md-push-8″>Right Content</div> <div class=”col-md-8 col-md-pull-4″>Content</div> </div> </div> </div> </div> Working example: http://bootply.com/93614 Explanation First, we set two columns that will stay in place no matter the screen resolution (col-xs-*). Next, we divide the larger, right hand … Read more
Assuming the element which is floated and will be centered is a div with an id=”content” … <body> <div id=”wrap”> <div id=”content”> This will be centered </div> </div> </body> And apply the following CSS: #wrap { float: left; position: relative; left: 50%; } #content { float: left; position: relative; left: -50%; } Here is a … Read more