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".
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 a container that holds an image, some text and a footer
The image is situated at the top with the text underneath, followed by a footer that simply contains some additional metadata
I want to be able to hover over the content (Excluding the footer) and for it to all highlight
The issue I have is that I cannot make the "text" div span all the way to the bottom where the absolute positioned footer begins.
The footer will highlight on hover independently. I don't want the content hover to effect the footer and I don't want the footer hover to effect the content hover
Here's a codepen link to an example which shows that the blue highlight only covers to the bottom of the text, opposed to the entire panel up until the metadata footer http://codepen.io/anon/pen/bVNeqr
An assistance or guidance here would be greatly appreciated.
HTML
<div class="item">
<div class="content">
<div class="image">
<img src="http://lorempixel.com/output/city-q-c-300-200-4.jpg"/>
</div>
<div class="text"> Text here </div>
</div>
<div class="footer"> Footer </div>
</div>
Insted of position:absolute you can use css3 "flex" property to solve this problem. Try to add this to your code.
.item {
display:flex;
flex-direction:column;
}
.content {
flex-grow:1;
}
Here's an example
Something like this?
I just added some plain CSS stuff and it seems to work fine.
http://codepen.io/KingK/pen/bVNeoo/
.text
{ height: auto; }
I am into designing my page and I've got troubled aligning the header.
As you can see here:
I wanted the "Add" will align with the employee list. How would I do that?
By the way here's the html code:
I've used bootstrap. But a native css suggestion is still good.
<div class="title">
<h4>Employee list</h4>
<span class="pull-right">Add</span>
</div>
Thanks
Move the Add to before the <h4>. When you float right, the target element should be before the other element if you want them to align.
Demo
HTML
<div class="title">
<span class="pull-right">Add</span>
<h4>Employee list</h4>
</div>
CSS
.pull-right {
float:right;
}
give h4 width auto and float left
CSS
h4
{
float:left;width:auto
}
and span float right width auto
.pull-right
{
float:right;width:auto
}
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>
I am trying to push my sidebar to the right of my page. When I do this my division gets pushed to the bottom of the page. Why is this?
Here is my page:
link text
It is because You use something like
<div id="Main">
<div id="content"></div><div id="sidebar"></div>
</div>
note that Div is a Block element.
You have 2 option to correct this issue. use from an inline element like span (instead of content andsidebar ) or convert div to an in-line element with css like
#sidebar, #content
{
display: inline-block;
}