I have a div which is floated to the left. To the right of that, I have a <ul class='nav nav-tabs'>.
If I float the nav list to the left, it looks fine except that the bottom border of the list only extends beneath the nav options. How do I get it to extend across the remaining portion of the screen? (i.e. all the way to the right).
If I don't float the list to the left, the tabs stay in the right place but the bottom border fits to 100% of the view port and moves to below the left nav.
Here's the JS fiddle: http://jsfiddle.net/kimprince/TCEPE/
Thanks!
Instead of floating the right column to the left, add overflow:hidden (or auto) to trigger a new block formatting context.
This effectively causes the right column to take up the remaining horizontal space.
You can find a thorough explanation about how this works here
#right-col
{
overflow:hidden;
}
FIDDLE
Hi didn't quite understand use col- class like col-lg-4 don't add your own floats if you can avoid it use class pul-left for floating it left or pull right for floating it right
also to get the head links of bootstrap to work in online editors like mine click the icon next to the word HTML.
http://codepen.io/CarraraWebsiteSolutions/pen/JFebh
Related
I have 6 floating divs (align to left) on a page. These divs has 2 different widths (depending the image () ). One div has 295px and the another has 216px. The height is calculated automatically by HTML. The container has 1050px, so in one "line" of the container I can insert 3 divs, and the another 3 on the second "line".
The CSS rule is working, all divs are floating to the left, each div has 20px margin, but the problem is the alignment of them. I want to align these divs proportional. At the moment if some pictures has different heights, on the second "line" are some blank spaces (because the height of the pictures above).
I want something to float these divs on the Y coordinate (proportional).
Look at this pictures:
Make a jsfiddle for people to play with.
But, you will probably want to make a container div for each row. This encapsulates the 3 inner divs, being as high as them and allowing the next container to fit nicely underneath
See my fiddle: http://jsfiddle.net/TJxmT/
Wouldn't a min-height at the floating divs solve the problem?
Try to use jQuery plugin called Masonry to fix that layout... You will be surprised!
EDIT:
You can always clear the 1st item in the row and every third item using css :
li:nth-child(3n+4) { clear:left; }
Have you tried putting a clear: both; on every first div of a new line?
I have a quandary. I have an application where CSS seems to do what it is supposed to do, but does not show results as you would expect and I can find no solution to get the "expected" results. The issue is how content is flowed when there is a float element to the left of the content and the content styles use padding or margins.
In my application, users can enter text in a DIV. There may or may not be a float left element so that the div with the text can either be at the left of the body area or shifted to the right (i.e. after the floating element).
When there is no floating element, the text is fine with paragraphs (i.e. with divs and appropriate classes) that are left, indented, first line indented, or hanging.
The CSS for the paragraphs are:
.firstindent { text-indent:30px; }
.indent { padding-left:30px; }
.hanging { padding-left:30px; text-indent:-30px; }
However, when a a float left element is added, only the standard and first indent show properly. This is because padding, borders, and margins are outside the box model "content" and only items in the "content" area are adjusted for the float.
Floats. In the float model, a box is first laid out according to the normal flow, then >taken out of the flow and shifted to the left or right as far as possible. Content may
flow along the side of a float.
If you use Firefox with Firebug, you can highlight the divs and you will find that the padding is shown at the left edge, i.e. "underneath" the floating element, not adjusted to the right of the floating element.
As a result, the paragraphs with a float left element look like this:
(Note that the float element also effects the presentation of lists.)
So far, I have not been able to come up with a CSS solution that lets me set the main text contents and then have them properly display whether or not there is a float left element to the left.
I have posted a full HTML sample so please feel free to snag the source and see if you can find a solution! Sample Page
Thank you - I should have included the "what you expect". Here it is with the float left and the float left spacer.
To correct, set overflow: hidden on all your paragraph elements (and lists, etc.) See fiddle.
I would like to know if I can float the div like this using CSS. What I would like to do is to move the DIV which is CSS DIV 2 under the CSS DIV 1 to the right when reducing the windows size. See the screenshot below:
This is how three DIV would display on bigger windows size. First DIV is at the top left corner, the second DIV is under the first DIV. Then the third DIV is on the top right.
When I resize the browser windows, the third DIV which has wider width will drop to the botton under the first DIV, and the second DIV will automatcially move to the top right corner to fill in the space.
Anyone think that this is possible to do it by using CSS, and might not need to use JS or others?
Thanks
I'd say that change is achieved either by changing from a columnar layout to a row layout, or else by swapping the order of the two elements. Either way, it requires JavaScript.
I have a div-layout on my asp.net page.
Left a div for menu, middle a div for content and right a div for a online user list.
All divs are with float:left and height/width on his place and it works problemless.
Now I must have a advertise over the left and the middle div together.
My first try was to have it in the middle and set margin-left:-270px;.
But the the advertise-div is OVER the menu and you cant click anything anymore.
My second try is to have it in the left div and overflow it easyly on the middle div, but that of course don't work, because the left menu div has a width: 300px; and exacly there end the banner.
here is it to see:
http://s3.imgimg.de/uploads/4b247298bJPG.jpg
how to do?
It's hard to tell without seeing your HTML/CSS, but perhaps the easiest way would be to to put the advert in it's own <div> under all of the left, middle, right divs, and use something like margin-top: -110px to shift it up.
It's not a very clean solution. If you can't get this to work, or just plain don't like it, then post your code.
I made a little example of my problem here:
http://peterbriers.be/test/float_html5.html
As you can see, I have a 'navigation list', and a floating header.
WHY is the header IN the navigation list? That is'nt normal behaviour is it?
The navigation list even inherits the height of the header. :s
This has nothing to do with HTML5. Did you want to clear:both on the nav? You floated the header, floated elements are taken out of flow so the nav acts like it isn't there.
If clearing doesn't do what you want, please include information as to what your desired layout needs to be.
EDIT for clarification and confusion:
The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.
Also, you still have not told us how you want it to look ( for reasons I do not know of ).
This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:
How Elements Float
Elements are floated horizontally,
this means that an element can only be
floated left or right, not up or down.
A floated element will move as far to
the left or right as it can. Usually
this means all the way to the left or
right of the containing element.
The elements after the floating
element will flow around it.
The elements before the floating
element will not be affected.
If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.