I am using pull-right on a div that sits inside a container div but for some when I use a pull right on the div it makes the div wider so that it isn't flush with the right side of the page. Ive used Chrome to inspect the element but I can't figure out where this extra width is coming from. It isn't the padding or the margin the container just seems to be wider?
Problem can be seen here at the top of the page where all the social media icons are.
http://puntachivosurfcamp.com/
<div class="container">
<div class="pull-right">
<a><img/></a>
...
</div>
</div>
There is no such extra space but the text is just aligned to the left although the container you are talking about is pull-right but the objects in it aren't. So:
Apply text-right as well on your pull-right div to align the text to right side :)
Apply pull-right to every object present in the div aka social media icons (but I recommend the first approach)
Explanation:
The width of the container is greater then the width of all the object in it so when the objects in the container will be left aligned it will show us as if some extra space was present on the right side but as soon as we align the text to the right we see that now the space has been vanished and the objects have now come on the extreme right of your page.
Related
<div class="pull-xs-right">
<i class="sf-icon-add-new grow clickable icon-large au-target" click.delegate="controller.addListItem()" aria-hidden="true" au-target-id="82"></i>
<i class="sf-icon-save grow clickable icon-large" aria-hidden="true"></i>
</div>
This works to pull the icons to the right, which just uses float: right.
The issue is that when using this, the div does not seem to occupy the normal flow, so content below it is underneath part of the icon. As if the padding or margins were no longer respected.
If I take the float off of it, then it moves to the left, and the padding and margins is as usual.
Why is this? How to I make the layout the same as if it were on the left?
Because that's the entire point of floats.
9.5 Floats
A float is a box that is shifted to the left or right on the current
line. The most interesting characteristic of a float (or "floated" or
"floating" box) is that content may flow along its side (or be
prohibited from doing so by the clear property).
If you want to prevent the div from collapsing vertically, see Floating elements within a div, floats outside of div. Why?
add class clearfix to the subsequent element.
I have a strange issue with floating elements. The float-left property of the heart is getting floated as if the start of the div is from bellow the add to bag button, instead of the start of the div on the very left, under the yellow box with 1 in it.
All three elements have float-left property, and their parent div has clearfix class from Bootstrap. I don't think any other CSS is acting upon their positioning.
.html
<div class="clearfix">
<div class="pull-left">1 dropdown box</div>
<div class="pull-left">add to bag button</div>
<div class="pull-left">heart</div>
</div>
They are usually aligned next to each other, but on smaller screens the add to bag button pushes the heart button on the bottom line and the idea is when it gets pushed to be under the dropdown with the quantity.
Any ideas?
Don't use float (use display:inline-block instead) and it solves. If you want to use floats, you need to reestructure html. You can make a simple grid with classes to small and big screens, that allows you to control better the behaviour.
you can use Breakpoint for the the small screen size that then use
poistion:relative;
in the css
#media screen max-width:480px;{
position:relative;
}
I'm trying to design a page header inside a bootstrap v3 'well' div. This header should contain a title (big text from the left), a last updated timestamp (lower left corner) and a small logon toolbar (lower right corner). This works mostly fine but now I'm trying to add a padded border around the last updated and logon toolbar divs, and it seems only the text itself stays inside the well, the padded borders are overflowing the bottom of the well.
See this bootply for an example: http://www.bootply.com/127078
Any idea's how to fix this?
If you add the overflow property to your css element .well-titlebar, that should fix it
.well-titlebar{
overflow:hidden;
}
If you place another div around your two floated divs with the clearfix class on it that should sort it out.
<div class="well well-titlebar">
<div class="PageTitleText">Page title!</div>
<div class="clearfix">
<div class="PageTitleLastUpdated">Last Updated:February 25 2014.</div>
<div class="PageTitleLogon">Logged on as: Alex Goris (Logout):
<span onclick="OpenUserInfoWindow('0008')">View Profile</span>| <span onclick="OpenUserEditWindow('0008')">Edit Profile</span>
</div>
</div>
</div>
http://www.bootply.com/127089
I'd like to horizontally align (for whatever screen resolution) the 2 main blocks.
One has a float:left.
If I set margin-left:auto to .site (main content block, at the right), it gets horizontally aligned. The problem is that I don't know how to have the sidebar (the block at the left) aligned too. It's difficult because I need to be sure that the menu gets perfectly "attached" to the content block (so I can't use position:relative;left:XXpx because it changes on different resolutions).
Any ideas? :)
EDIT: If possible, solutions that work with IE 7-8 too (unfortunately) :D
I might be missing something here, but you just want to get 2 block elements and make them center-aligned horizontally?
Just wrap them in another div and align that wrapper div with margin: 0 auto.
Check this link.
<div id="#wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
EDIT:
Of course that you have to float the Content div as well (and not only the Sidebar)
In a percentage-width container, a H2 is floated left and an image is floated right.
As the browser width is decreased, the image is pushed left towards the H2. When they meet, the logo is pushed down below the H2.
Example JSFiddle:
http://jsfiddle.net/VgS8B/1/
How can I make it so that the text starts wrapping over multiple lines before the image drops down underneath it? Like a sort of CSS "force whitespace wrap"?
This is probably simple but my brain isn't working :(
Is it necessary that the heading be floated left? You could left align it, remove its float, and place it below the image within the HTML to get your desired effect.
try this:
http://jsfiddle.net/VgS8B/5/