1598

CSS layout with both fixed and liquid columns

Question:

Mixing both liquid and fixed elements in my CSS layout seems troubling. I've tried various settings, but I can't get it just right.

I am trying to create a template where the main content is surrounded by a content on each side (top, left, right, bottom).

<div id="container"> <div id="header">k</div> <div id="left-column"></div> <div id="center-column">

Main Page

Liquid layout trial</div> <div id="right-column"></div> <div id="footer"></div> </div>​

Top bar (header) should have fixed height. Left column should have fixed height/width center column should float in both height/width depending on viewport and content right column should have fixed height/width. footer should have fixed height

Here's my CSS:

#header{ background-color: blue; height 50px; color: white; clear:both; } #left-column{ background-color: green; width:100px; height:400px; float: left; } #center-column{ background-color: yellow; float:left; } #right-column{ background-color: red; float:right; height: 400px; width: 100px; } #footer{ clear: both; height: 50px; background-color: pink; }

The center-column does not seem to use it's whole width/height as I would expect the whole area between the four "sides" to be yellow.

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/C6uYv.jpg" data-original="https://i.stack.imgur.com/C6uYv.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Another issue is with limiting the viewport, the right column drops below the center column <img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/3U2mM.jpg" data-original="https://i.stack.imgur.com/3U2mM.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

I also do not understand why my header needs content to be displayed. If I remove the character "K" it's not visible.

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/akErm.jpg" data-original="https://i.stack.imgur.com/akErm.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

I've got an fiddle of this example found here: <a href="http://jsfiddle.net/jasonBr81/vZDND/2/" rel="nofollow">http://jsfiddle.net/jasonBr81/vZDND/2/</a>

Answer1:

If you don't care for IE7, you can go with this. You'll gain another advantage, not only that your middle column has no fixed width:

All columns will always have the same height.

<ul><li>you could easily add a vertical border in one container over the whole height</li> <li>you'll never have the floating problem you described</li> </ul>

CSS

<style> #header { height: 50px; background-color: blue; color: white; } #left-column{ display: table-cell; height: 400px; background-color: green; } .left-column-inner { width: 100px; } #center-column { display: table-cell; width: 100%; background-color: yellow; } #right-column { display: table-cell; background-color: red; } .right-column-inner { width: 100px; } #footer{ clear: both; height: 50px; background-color: pink; } </style>

HTML

<div id="container"> <div id="header">HEADER</div> <div id="left-column"> <div class="left-column-inner">LEFT</div> </div> <div id="center-column">

Main Page

Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial

</div> <div id="right-column"> <div class="right-column-inner">RIGHT</div> </div> <div id="footer">FOOTER</div> </div>​

Recommend

  • Safe ERB Language?
  • Chang the product price when custom checkbox is selected in Shopify
  • Animate UIButton Background color from bottom up, Objective C
  • android test support flavors and build type variants?
  • as3 addChild into a generated triangle
  • JSPM - Are there any advantages/disadvantages in including client side library files using import vs
  • C# helper classes to implement NTLM authorization
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • jinja2 template not found and internal server error
  • Creating a Multi-Step Modal Using Jquery
  • Connecting bluetooth device to windows phone 8 application
  • Get the number 18437736874454810627
  • Plotting densities in R
  • Update Google Maps traffic layer without page reloading
  • Floated image with variable width and heading with background image
  • D3 get axis values on zoom event
  • Groovy: Unexpected token “:”
  • Installing iPhone App to iPhone
  • Replace value with Factor in r data.table
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Jetty Server not starting: Unable to establish loopback connection
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • How to access EntityManager inside Entity class in EJB3
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Align navbar back button on right side
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Window Size for Mac application
  • htaccess rewriting URLs with multiple forward slashes
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Display Images one by one with next and previous functionality
  • Web-crawler for facebook in python
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • A cron job substitute?
  • Android Studio and gradle
  • JTable with a ScrollPane misbehaving
  • How to push additional view controllers onto NavigationController but keep the TabBar?