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;
}
Related
The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats
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 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.
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)
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.