I'm trying to build a 3 column layout that has one fixed column on the left, a fluid column in the middle and another fixed column on the right.
Anyone seen this?
There are similar problems here, but not the solution I was looking for.
CSS Layout 2-Column fixed-fluid
http://www.dynamicdrive.com/style/layouts/category/C13/
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
Yes?
Use fixed width and float to the appropriate side on the left and right columns. Then set the right and left margins of the fluid div to the width of the fixed divs. Fluid div should follow the fixed ones in the html.
Related
I am a bootstrap newbie. I am trying to create a layout with full width and height. I need to have two divs, one as the header and the bottom one will have the content to fill the entire space below the header.
What is the best approach to accomplish this?
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.
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.
I have a request to make a HTML/CSS 3-column layout that meets these criteria:
middle and right column have a fixed width
left column has a max-width
the 3 columns are horizontally centered
ff the browser's viewport gets shrinked and the left border of the left column touches the left border of the viewport, then, by further shrinking the viewport, the left column starts shrinking in width until width is 0. (like in this example, except for that here the left column also has a min-width).
I could not find such a layout. If it is possible, how do I achieve this? (Telling me, it's not possible, would also earn the checkmark).
Here is a guide to responsive layouts and another to some responsive frameworks you might consider using to achieve what you need to.
Generally it's good ettiqute on the stack network to try and create code yourself and then post specific questions if you get
stuck.
Basically I want to layout a toolbar with some icons on the left and right and a variable sized text field in the middle. I want the text field to take up the remaining space in the middle. The side sections widths are not known ahead of time, they are determined by the number of visible buttons on each side.
The problem is similar to http://www.alistapart.com/d/holygrail/example_4.html except he side column widths can not be hardcoded.
Is it possible to do this purely in CSS?
It sounds like you need display:table-cell
http://www.w3schools.com/css/pr_class_display.asp
Container can be display:table-row and the children can be display:table-cell. I believe that should work for you.
To answer my own question, if you're using a browser that supports the flexible box layout model, setting the left and right DIVs to "-webkit-box-flex: 0;" and the center DIV to "-webkit-box-flex: 1;" does exactly what I want. The container should have "display: -webkit-box;"