Printable View
1) CSS Liquid Layout #2.1
2) http://www.dynamicdrive.com/style/la...1_fixed_fluid/
3) I am trying to change the CSS so that the left column will appear at the top of the smaller page instead of at the bottom. I've tried to simply swap the tags in the CSS, but the left column still appears at the bottom. How would I change the CSS so that the left column of the desktop version will move to the top of the smaller-width version?
Chris
Something like this:Code:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)</title>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
margin: 0;
padding:0
}
#header {
position: relative;
width: 100%;
height: auto;
display: inline-block;
background: #EAEAEA;
line-height: 35px;
}
#leftcolumn {
position: relative;
display: table-cell;
width: 200px;
background: #C8FC98;
vertical-align: top;
padding: 15px;
line-height: 30px;
}
#contentwrapper {
position: relative;
display: table-cell;
vertical-align: top;
padding: 15px;
line-height: 30px;
}
#footer{
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px;
margin-top: 0;
}
@media (max-width: 600px){
#contentwrapper {
display: block!important;
}
#leftcolumn {
width: 100%
}
}
</style>
</head>
<body>
<div id="header" >
<div class="innertube" >
<h1 style="line-height: 40px">CSS Liquid Layout #2.1- (Fixed-Fluid)</h1>
</div>
</div>
<div id="leftcolumn" >
<div class="innertube"><b>Left Column: <em>200px</em></b>
Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here end
</div>
</div>
<div id="contentwrapper" >
<div class="innertube"><b>Content Column: <em>Fluid</em></b>
This is just some filler text This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here Demo content nothing to read here This is just some filler text Demo content nothing to read here Demo content nothing to read here Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Welcome to Dynamic Drive CSS Library
</div>
</div>
<div id="footer">
<a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
</div>
</body>
</html>
I tried using the CSS you gave me, but the left column appears on the right instead of the left in the larger screens.
Chris
Quote:
Originally Posted by molendijk
That's odd! Can you put your page online so that I can see what might cause the problem?
I don't have a site to place my page on. Can someone tell me where I can post my page for free so others can see it and let me know what's wrong?
Chris
Try jsfiddle.net. You can test HTML, CSS and JavaScript code snippets there, known as 'fiddles'.
EDIT:
Or try this. I made it a long time ago for personal use. It's not perfect but good enough for testing. Put your code in the gray box at the top. The result will appear in the box below.
In the meantime, I've put my code online, see this.
OK, here is my jsfiddle site for you to take a look at my code: https://jsfiddle.net/chrscote/92z76e1v/5/.
I have some javascript that is supposed to fill in some sample text into each column, but it doesn't seem to work on jsfiddle. However, if you take all the code that is given and put it into a single html file, you should get some text in the columns, but as you'll see, the Left Column is showing up on the right, though it does get moved to below the Content Column as I want the right-hand column to do.
Chris
I just figured out a solution. If you look at my jsfiddle code, by moving the left column div above the content wrapper div, it works perfectly.
That's also what I had in the code I gave you. So what you did in your fiddle is not what I proposed, view souce of this.Quote:
Originally Posted by chrscote