Instead of using float: left, use display: inline-block: <div id=’wrapper’ style=”text-align: center;”> <div style=”display: inline-block; vertical-align: top;”> Lorem ipsum<br /> dolor sit amet,<br /> consectetur adipisicing elit </div> <div style=”display: inline-block; vertical-align: top;”> Lorem ipsum<br /> dolor sit amet </div> </div> The top of each inner div is kept aligned by using vertical-align: top. Example: …
you need to wrap your text inside div and float it left while wrapper div should have height, and I’ve also added line height for vertical alignment <div style=”border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;”> <div style=”float:left;line-height:30px;”>Contact Details</div> <button type=”button” class=”edit_button” style=”float: right;”>My Button</button> </div> also js fiddle here =) http://jsfiddle.net/xQgSm/
You can make two divs inline this way: display:inline; float:left;
There’s actually an easier way to do it than using floats: .container { position: relative; } .left { width: 185px; position: absolute; top: 0; left: 0; } .right { margin-left: 185px; }
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 …
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 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 …
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>