I have 3 block elements (2 navbars and one picture) in one container, all are floating and have a fluid width. The picture is in-between the navbars, so my left navbar and the pic have float:left and the right navbar has float:right.
My goal is to get the picture underneath the navbars on mobile devices. To do so I thought I just have to add float:none to the pic in my media query but the result is the right navbar positioning under the pic.
Is there maybe a way to re-arrange the divs in mobile-view?
Best solution would be a trick to tell the floating elements in which order they should float.
I think you're looking for clear:both.. anyways, here's one way around it;you can adjust the width's and what not, but you get the idea: Fiddle. Also, note that because all items are floating.. you can place the image AFTER both navbars & have it displayed in the center at larger widths.
Related
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
Im making a responsive site with dynamic content. I have a row of divs that will wrap at smaller screen widths. As some of the divs have more content and are taller than others, when a div wraps it doenst always go all the way to the left of the screen.
http://codepen.io/anon/pen/Ljmkb
I need a solution that works for different screen widths and for when the content makes the divs different heights, in other works I cant just set clear left on the 4th div.
Change float:left on your div elements to display:inline-block; in laymans terms this will place them on the same line if there is space, or start a new line and place the overflowed element at the start of it if not.
By then placing the elements in a vertical-align:top environment, they will maintain their top alignment.
Demo Fiddle
I have 15 Divs with 200px x 200px sized. I also having a container div which height set to 100%.
I need to display the Divs vertically one by one and when its reached the end of the container height, The following divs should display in the second column.
I exactly need my divs to display like floating icons in desktop in PC.
Please help me fix this.
This can be done by setting css column-count property of ul to number of columns
This link explain more about this solution
How to make floating DIV list appear in columns, not rows
I created an image of what i would like to create using CSS. I also made a small setup in JSFiddle.
The problem is that i can create everyting, except for the fluid column on the right. I am using it to show images in a slideshow, and i would like them to appear from the right of the screen and dissapear on the left "behind" content 1.
I tried absolute, relative and fixed positioning. But the result is either losing the centered left positioning of content 1 or not having a fluid column up to the right of column 2.
You need to use width:100% to fill the whole screen, http://jsfiddle.net/a9Yda/2/
Is this code what you were looking for?
I added a fixed position and min width to the right div which seems to have achieved the effect you were looking for.
how can I display divs with different height to be close to each other regardless of its height and with a specific margin just like buildings
I mean something like the divs in this website http://via.me
I used flaot:left but it floats only with the last div and leaves an empty spaces
this is the code that I used http://jsfiddle.net/D9rHB/6/
I think that the jQuery Masonry plugin would be what you're looking for in this instance:
Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
JS Fiddle demo.
You can do that. For that you have to have position as "absolute".
Then manually calculate the height and top value to place the div where ever you want.
For making the things easy take the width of all divs same. Also make height of divs in each
column fixed.
Let me know if you need more clarification how to do this.