I would like to make a simple panel with buttons that are placed horizontally and aligned to the right. Willing to align it to the left I can easily do this like that :
.button {
float:left;
background-color: #55cc66;
margin-right: 50px;
padding: 5px;
}
//......
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
But when I do the same with float:right it obviously aligns it to the right but in inverted order. I have also tried text-align: right, position: absolute; right:150; and position: fixed; right:150;. The last two align to the right but awkwardly overlap the 'buttons'.
How can I achieve this then ?
You can remove floats and align the container of your "buttons" to the right with the property text-align.
You don't want your heading to be aligned to the right so you've to cancel it with text-align: left;.
One problem remains: you're using non-semantic div when what you really want are buttons. You should use ... button elements (or maybe input[type"button|image|submit"]).
These ones are focusable and are made for an action taking place when clicked (with mouse, keyboard or tap).
Back to these div: they are displayed as blocks by default, you've to change for inline-block - IE8+.
Fiddle: http://jsfiddle.net/PhilippeVay/YZaRW/
Leave the class .button with float left, wrap all your buttons with another division (btn_wrapper) and add a specific width to it and float right. Just make sure that all your buttons fit inside the wrapper
.btn_wrapper{
width:300px;
float:right
}
<div id="switcher">
<h3>Style Switcher</h3>
<div class="btn_wrapper">
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
</div>
Related
I am trying to achieve the attached design. Basically, I have a top bar in the page, which has a few buttons on left, and few on right.
Below the top-bar, I have another section (Div), which has two buttons placed side by side.
For the top bar, I combined the two buttons on left in a single div, and two buttons on right in another div, made these two divs as float left and right respectively. Given I had wrapped them in another div, I expected the second section to start from next line onwards, but in the end they are all coming in a single line, i.e.
"top-bar (left stuff)" "2nd section button1" "2nd section button2" "top-bar (right stuff)"
Why is my second section not starting from the next line onwards?
<div class="top-bar">
<div class="bar-left">
<span class="top-bar-title text">MYTEXT</span>
<img src="res/rev.svg" alt="MY Logo"/>
</div>
<div class="bar-right">
About
<button class="login-btn">Login</button>
</div>
</div>
<div class="two-btns">
<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
</div>
And CSS is
.bar-left {
vertical-align: center;
float: left;
}
.bar-right {
vertical-align: center;
float: right;
}
I think your problem are the floats on the bar-left and bar-right elements.
When you give float to an element it "remove the element from the document's flow", so it is kind of like your top-bar is empty (and collapses) because both children have floats.
My suggestion would be to use display: flex and justify-content: space-between on the top-bar element and remove the floats from the bar-left and bar-right elements.
I made a JSFiddle example here: https://jsfiddle.net/gc02r59p/
You can read here about the justify-content property and here about the float property
Add this to your css
.two-btns {
clear: both;
}
I have the following code
<div class="site-branding">
<h1 class="site-title">Test</h1>
</div>
<button class="menu-toggle" aria-controls="primary-navigation" aria-expanded="false">Navigation</button>
On my CSS, I put site-branding to float left and then menu-toggle to float right. On normal resolutions, the display is good. The brand is at the left side of the header and the menu-toggle is at the right but when the screen gets smaller, I want the menu toggle button to be below the site-branding div but the behavior that I got is that the menu-toggle is colliding with the site-branding div. Any ideas how to resolve this? thank you.
Float will ignore the element's collision box. You will have to use media queries to apply new CSS to your header when the screen is too small.
For example, if your branding is 300px wide and your toggle is 60px wide, you should use a media query of max-width: 360px, target another CSS file that will place the toggle below your branding image.
Here is an example of what does happens if you float these elements:
.headline {
float: right;
}
.btn {
float: left;
}
<div>
<h1 class="headline">Some link to your homepage</h1>
</div>
<button class="btn">some button</button>
(press fullscreen and resize your browser window)
The button element floats below the headline.
Now can you add the css classes for the button and site-title?
You will get the answer as you like if it rewrite it as follows. You just adjust the width of the div as you like.
Css
.FloatClass{float:left;}
Html
<div class="FloatClass">
<h1 class="headline">Some link to your homepage</h1>
</div>
<div class="FloatClass">
<button class="btn">some button</button>
</div>
All the best
I have some divs which don't behave like I wish.
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block;"><b>Productname</b></div>
<div style="float:right; width:80px;">
<div>
<button id="editBtn">Edit</button>
</div>
<div>
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
JSFiddle link
Two problems here:
the bordered divs is not high enough: the 'remove' button is not visually in the bordered div
When the 'product name' is longer, the buttons are rendered under the div with the product name. I would like the product name to be over multiple lines when this happens. The three divs should always be next to eachother.
The first and last div has a fixed width, the middle div (product name) should stretch with the size of the bordered div
Personally I'd use a table for this. Each row of the table is an item, and you have a column of images, a column of names, and a column of actions. Is this any different to the tables used for invoices?
I can't quite get the effect you want, but improvements can be made: a floated element should come before the elements that are to go around it - so in this case, it should be the first thing inside the list-product-with-border container. Also, you should either have an element with clear:both at the end of the container, or set the container to have overflow:hidden to force the floated element to be inside.
Do you want it like this?
Here's the Fiddle
<style>
.list-product-with-border {
padding:3px;
width:60%;
border:1px solid black;
overflow: hidden;
height: auto;
}
</style>
And now the HTML
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
<div style="float:right; width:180px;margin-top: 10px;">
<div style="float: left;">
<button id="editBtn">Edit</button>
</div>
<div style="float: left;">
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
</div>
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
There are some options I can choose from when it comes to horizontal center alignment with Bootstap.
I can either use offset class or use blank span class as a placeholder.
One other option can be using custom alignment like the following
.center {
float: none;
margin: 0 auto;
}
None of these options solve my issue because the content of the div container has to fill up the width by 100%.
Let's say I have the following
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 offset4">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
</div>
If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.
Here I have a canvas to play with. JS BIN
Since you have inline elements you can just use the .text-center class on the span, also your're probably better off using offsets than empty elements:
HTML
<div class="row-fluid">
<div class="span4 offset4 text-center">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
Updated demo: http://jsbin.com/ayuFEhO/2/edit
You don't need add a new class, if you want horizontal align this buttons, just use .text-center here is a bin http://jsbin.com/UVeGejO/1/edit
Obs: text-center class already exist on twitter's bootstrap code.
How can I right align a button inside a div without wiping it from the Markup Flow with valid CSS and HTML? Is applying margin-leftthe only way to do this?
I have a structure like this
<div class="navContainer">
<div class="title">
<span>Nav Titulo</span>
</div>
<div class="navContent">
Nav Conteudo
</div>
<button type="button">Enviar</button>
</div>
<div class="navContainer">
<div class="title">
<span>Nav Titulo</span>
</div>
<div class="navContent">
Nav Conteudo
</div>
</div>
If I apply button { float: right } or button { position: absolute } the next div will get over the button. It happens that I just want to make the button position at the right side
what you want to read up on is clearing
if you have floated elements, they go out of page flow, but any element with clear:both will stay in page flow, but not allow anything on either side of it, floated or not.
in practice, adding a clear:both element after you floats makes things work the way you want them to.
.navContainer { text-align: right; }
#Matt is right. What you need to do is clear the div elements.
.navContainer {clear: both}
If you want your button aligned at the top of the containing div, you might have to move it before your div element of class "title".