Trouble changing Fixed Fluid page [Archive]

View Full Version : Trouble changing Fixed Fluid page

chrscote

11-01-2019, 01:31 PM

1) CSS Liquid Layout #2.1

2) http://www.dynamicdrive.com/style/layouts/item/css_liquid_layout_21_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

molendijk

11-06-2019, 10:23 PM

Something like this:
<!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>

chrscote

11-07-2019, 01:27 PM

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

Something like this:
<!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>

molendijk

11-07-2019, 07:11 PM

That's odd! Can you put your page online so that I can see what might cause the problem?

chrscote

11-11-2019, 05:39 PM

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

molendijk

11-11-2019, 06:03 PM

Try jsfiddle.net. You can test HTML, CSS and JavaScript code snippets there, known as 'fiddles'.
EDIT:
Or try this (http://mesdomaines.nu/eendracht/preview_file/preview_file.html). 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 (http://www.mesdomaines.nu/fluid.html).

chrscote

11-11-2019, 06:49 PM

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

chrscote

11-11-2019, 07:12 PM

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.

molendijk

11-11-2019, 07:52 PM

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 (http://mesdomaines.nu/fluid.html).