I'm trying to create a responsive layout in bootstrap that has a full-height sidebar. I got the responsive part working, but the only problem is - the spacing of the spans don't seem to be playing well together.
On the right side - the main content - it doesn't span to fit the rest of the screen. Also, when the browser gets too small - the main content actually gets partially hidden by the sidebar.
Am I doing something wrong with the spans? If I remove the position: absolute; from the .sidebar, then the whole .content. piece slides underneath the sidebar - but the sidebar is no longer full height, and the content still doesn't fill the rest of the screen evenly. It seems as it's impossible to get this working correctly, but I want to use bootstrap for the convenience of not having to redo all the CSS/JS that's integrated.
Example:
CSS
html {
height: 100%;
}
.sidebar {
background: #333;
margin: 0;
padding: 3em 2em;
height: 100%;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
min-height: 100%;
position: absolute;
}
.sidebar .logo { margin-bottom: 3em; }
.content {
margin: 5em;
}
HTML
<body>
<div class="row">
<!-- Navigation for small screens -->
<div class="navbar navbar-inverse hidden-desktop">
<div class="navbar-inner">
<a class="brand" href="/">Home Link</a>
<ul class="nav">
<li>Projects</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- Navigation for larger screens -->
<div class="span3 hidden-phone hidden-tablet">
<div class="span3 sidebar">
<div class="logo"><a class="logo-title" href="/">Home Link</a></div>
<ul class="nav nav-pills nav-stacked">
<li>Projects</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="span9 content">
<div class="span5">
<div class="page-header">
<h1>Hello. <small>This is.</small></h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.
Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>
</div>
<div class="span3">
<div class="page-header">
<h1>Second Header. <small>Not working.</small></h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.
Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>
</div>
</div>
</div>
</body>
You're already setting that sidebar to absolute, why bother with the height: 100%? It'd be easier to simply add top:0; bottom:0.
The reason your sidebar is getting slid over the content like that is the absolute positioning of the sidebar. If you want to keep that from happening, I'd recommend setting a defined width in your sidebar class (say, of 240px), then changing content's CSS to read like so:
.content {
padding: 5em;
left: 240px;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
That should constrain your content appropriately to not slide under your sidebar in any circumstance. Then, in order to make it appropriately responsive, adjust font size and width of your sidebar down as the screen reduces, and decrease the left property of .content to match the width of the sidebar.
Is that what you're looking for?
Related
How do i position a centered text or logo (picture 2) at the bottom of the viewport similar to a footer? When the dropdownmenue (picture 3) opens the logo or text should move accordingly to the new height.
So the div below point 5 should dynamically change its height or get out of site in case.
I tried several solutions i googled prior but somehow all did not work like i wanted it to be.
If you know the height of the footer, then you could use min-height, absolute positioning and padding-bottom. However I'm going to assume the more difficult case in which you don't know the height.
<style>
* {box-sizing:border-box;}
.wrapper {min-height:100vh;display:flex;flex-direction:column;}
.main {flex:1 0 auto;}
.footer {background-color:yellow;padding:16px;font-weight:bold;flex:0 0 auto;}
</style>
<div class="wrapper">
<div class="main">
<h1>
Main
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet, nibh id placerat viverra, justo purus semper dolor, at lacinia eros mauris eu libero. In finibus a urna dapibus tempus. Aenean ipsum urna, tempor at lectus non, blandit feugiat quam. Donec sed ante orci. Integer laoreet est erat, a feugiat leo posuere sed. Mauris sit amet metus finibus, dapibus nunc ut, molestie erat. Nullam rhoncus sagittis lacus id finibus. Etiam sollicitudin nibh dui, a mollis nisl pharetra vitae. Suspendisse nec laoreet ipsum. Fusce sit amet tempor sem. Vestibulum consequat est in nisl aliquam ornare. Aliquam erat volutpat.
</p>
<p>
Sed vulputate nisl ac est eleifend bibendum. Nullam cursus at ex sit amet dignissim. Sed blandit pretium venenatis. Phasellus at ullamcorper nibh. Aenean nec lectus semper, efficitur diam in, luctus nisi. Phasellus in ligula congue, cursus nunc et, luctus mi. Suspendisse a leo luctus, molestie elit sed, venenatis sem. Nullam lobortis ante nec dictum elementum. Praesent aliquam orci quis molestie consectetur. Aliquam ornare a ipsum dapibus pulvinar. Morbi aliquet posuere ligula, vel volutpat dolor pellentesque vel. Vivamus non euismod leo. Duis feugiat velit a est tincidunt pulvinar. Proin blandit malesuada pulvinar. Nunc ut elementum ex, non vehicula tortor.
</p>
</div>
<div class="footer">
Footer
</div>
</div>
Change the height of your browser up and down to see how this works - the principle is a vertical flexbox that's at least the height of the screen, and a footer that's always at the bottom because the main content grows to fill any spare space.
Currently still doing my project and I'm trying to find out how to position headings in certain places. Figure 1 is my final goal for my headings to look like.
[Figure 1][1]
Currently this is what mine looks like (Figure 2), I am struggling to position the heading to a similar spot, every time I do, the paragraphs and the navbar move further down leaving a big white gap between the headings & paragraphs.
Also was wondering how would I level out the image with the text & navbar?
Thanks in advance, much appreciated.
[Figure 2][2]
I believe this is what you wanted:
preview
Basically, you could wrap the header (image + text) into a CSS flexbox, and the rest of the stuff into another flexbox. I edited the CSS file to reflect these changes. Hope this helps! Let me know if you have any other questions.
Here's a link to the jsfillde: https://jsfiddle.net/rzLbkw9m/
Here's the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="holiday.css" rel="stylesheet" type="text/CSS">
<title>Task 4</title>
</head>
<body>
<div class="header-container">
<div class="header-image">
<img src="https://st.depositphotos.com/1115174/1875/v/450/depositphotos_18752455-stock-illustration-summer-beach-vacation-background.jpg" alt="Holiday" width="400" height="200" align="left">
</div>
<div class="header-text">
<h1>Holiday Time</h1>
<h3>Get away from it all</h3>
</div>
</div>
<div class="row">
<div class="list-column">
<ul class="list">
<li>Destinations</li>
<li>Deals</li>
<li>Flights</li>
<li>Cruise</li>
<li>Extras</li>
<li>Money</li>
</ul>
</div>
<div class="main-column">
<div class="paragraph">
<p>
<img src="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultrices libero eu eros viverra, eget tristique ipsum commodo. Phasellus tempus a erat quis hendrerit. Quisque ipsum felis, vestibulum sed finibus vel, molestie id ante. Morbi metus leo, dictum nec pellentesque nec, condimentum quis magna. Praesent est turpis, pharetra non fermentum sed, elementum ac ante. Integer sodales metus id rutrum hendrerit. Phasellus vel dapibus massa, ut aliquet arcu. Ut consectetur feugiat neque, sed sagittis dui rutrum eget. Maecenas commodo mattis enim quis lacinia. Duis in ipsum vitae mi laoreet dignissim. Nullam consequat velit at magna commodo, in fringilla enim rutrum. Cras at augue sed nisl ultricies lobortis. Praesent rhoncus lectus facilisis, rhoncus purus et, luctus eros. Nunc eros nisi, finibus sit amet urna quis, posuere ultrices mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis lorem vel neque bibendum iaculis vel id tellus. Nulla auctor elit vitae sollicitudin ultrices. Fusce molestie dictum neque, et dictum magna iaculis eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed volutpat, augue eget tincidunt feugiat, felis mi vulputate sem, eu mattis nisi quam sit amet est. Cras eu sem nec metus iaculis tempus sit amet non sapien. Aenean id odio semper purus dignissim elementum. Vestibulum faucibus mi ac odio hendrerit venenatis. Cras rhoncus diam magna, at placerat quam rutrum ut.
</p>
</div>
<div class="paragraph">
<p>
<img src="https://i.pinimg.com/474x/c6/60/24/c66024ea79527d9bbafe79ed171558b9--luxury-travel-luxury-hotels.jpg" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Quisque fringilla sodales lorem eget rhoncus. Curabitur pulvinar blandit justo nec volutpat. Mauris bibendum lobortis quam et aliquam. Nulla dictum varius est, sed fringilla ante volutpat ac. Sed tempus dolor diam, ac porta ligula sagittis ac. Morbi vitae nisi porttitor, sollicitudin urna non, tempus justo. Donec vel vulputate est. Donec aliquet vitae velit eu interdum. Quisque et facilisis diam. Duis rutrum faucibus purus at tempus. Mauris auctor tincidunt mauris, quis porttitor magna aliquam molestie. Aliquam efficitur, ex sed finibus porta, tellus diam dictum arcu, ac egestas quam enim tristique velit. Integer volutpat tortor et tortor consequat tincidunt. Donec imperdiet libero vitae sapien commodo, eget pretium libero eleifend. Sed mi felis, porttitor vel blandit laoreet, pretium a felis. Duis in erat interdum, rutrum lectus viverra, pellentesque elit. Sed imperdiet massa ullamcorper mauris tempus, at euismod nibh convallis. In sapien lorem, lacinia eget viverra sit amet, suscipit in diam. Phasellus at sapien eu orci pellentesque eleifend suscipit eu diam. Vivamus quis nibh id sem placerat rutrum. Nunc pellentesque aliquet congue.
Nam at eros elementum, venenatis nibh vel, volutpat mi. Donec varius sapien ipsum, sed sagittis ligula iaculis hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pharetra ante eget purus rhoncus, ac pharetra eros fermentum. Etiam porta nec leo pretium gravida. Integer a nulla quam. In ullamcorper, nibh id efficitur porttitor, lacus mi semper nisi, id pulvinar ex leo at mi. Vestibulum placerat lacus vitae velit laoreet, in efficitur risus convallis. Nunc at sagittis dolor, eu gravida nunc. In hac habitasse platea dictumst. Mauris vitae lobortis ipsum, quis rhoncus mauris. Ut eget nibh sed dolor sollicitudin dictum efficitur ac ligula. Nullam ut nulla sit amet leo varius tincidunt.
</p>
</div>
</div>
</div>
<div class="footer"> Contact: 0191 227 1111</div>
</body>
</html>
Here's the css file:
/* header */
.header-container {
display: flex;
align-items: center;
border: 1px solid lightblue;
}
.header-text {
margin-left: 25px;
}
.header-text h1 {
color: purple;
font-size: 48px;
}
.header-text h3 {
margin-left: 20px;
}
/* navbar */
.list-column {
flex: 30%;
align-self: flex-start;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:first-of-type {
padding-top: 2px;
}
/* main content */
.row {
margin-top: 10px;
display: flex;
align-items: flex-start;
}
.paragraph {
margin-bottom: 25px;
}
.intext-img {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 10px;
}
p {
font-size: 18px;
margin: 0px;
}
/* footer */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.8rem;
text-align: left;
background-color: #64A3D6;
}
create a div around h1 and h3
.header{
position: relative;
top: 50%;
transform: translateY(-50%);
}
this will put the header in the middle of the area vertically. make sure the padding or margin is minimal
I'm having some troubles with Bootstrap columns, I have this code:
.vertical-line{
height: 100%;
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row body">
<div class="quote col-sm-1">
<img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
<div class="vertical-line"></div>
</div>
<div class="content col-sm-11">
<div class="row">
<div class="text col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
<p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
</p>
</div>
</div>
</div>
</div>
Also in http://jsfiddle.net/z55z3den/1/
So, what I wanna do is that the container with the class quote takes the height of its parent and then I could see the vertical line set in the container with the class vertical-line
Something like this:
I've been doing some research and I found something about flex properties in CSS but I haven't been able to make it works.
I hope you guys can help me.
Thanks in advanced.
The vertical line is same height with content, looks bigger because of margin of the last
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.quote {
position: relative;
}
.text {
padding-left: 20px;
}
.vertical-line{
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 40px);
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<div class="row body">
<div class="quote col-sm-1">
<img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
<div class="vertical-line"></div>
</div>
<div class="content col-sm-11">
<div class="row">
<div class="text col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
<p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
</p>
</div>
</div>
</div>
</div>
Add to class body the code:
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
May i suggest a different approach.
Just overwrite the default bootstrap styling for the <blockquote> element by using pseudo :before and :after elements. This will be a lot simpler. That way you would not need to load an extra image and you don't have to separate the elements into columns.
Here is an example:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
blockquote {
position: relative;
border-left-width: 0px;
margin: 20px 40px;
font-style: italic;
color: #aaaaa5;
}
blockquote:before {
content:url('http://s18.postimg.org/6kmdp3w05/quotes.png');
/*content: "\201C";*/
color: #ddddd5;
position: absolute;
top: -92px;
left: -42px;
font-family: sans-serif;
font-weight: bold;
font-size: 128px;
}
blockquote:after {
content: "";
width: 2px;
position: absolute;
left: 0px;
top: 52px;
background-color: #ddddd5;
height: calc(100% - 58px);
}
<div class="container">
<div class="row">
<div class="col-sm-12">
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.
</p>
</blockquote>
</div>
</div>
</div>
I'm having a problem with Firefox (tried with 3.6 and 4).
I need to create a 2 column layout with a static size menu, and a dynamic size content-column (if there is a simpler way than the code below, I'd like to know).
The easiest is probably that I paste the html and style (which is just a simple example of the "bug").
<html>
<head>
<title>Test</title>
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<div style="padding:0 9%;">
<ol class="container row padd">
<li class="content cell padd">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id laoreet orci. Aenean congue pharetra enim, et sollicitudin est congue quis. Sed sit amet nibh ut nibh suscipit sagittis. Curabitur eros nisi, pulvinar id placerat blandit, vulputate id eros. Nullam tempor placerat ultrices. Sed ut dui ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor felis non felis commodo in volutpat sapien malesuada. Nunc congue bibendum leo, sed rutrum sem imperdiet vel. Cras gravida leo id odio scelerisque ut pharetra turpis sollicitudin. Morbi urna lorem, laoreet a lacinia ac, convallis sed urna. Morbi ut diam magna, a elementum erat. Nulla viverra molestie vestibulum. Ut nec ante in urna egestas tincidunt.</p>
<p>Nullam malesuada, urna ac pretium suscipit, purus est viverra nulla, semper placerat lacus urna in mauris. Integer egestas venenatis commodo. Mauris sagittis rutrum erat, quis tincidunt erat bibendum non. Etiam quis erat diam, at ullamcorper nisl. Suspendisse non convallis ante. Fusce eget augue nunc. Praesent pellentesque commodo est, nec vulputate dolor tincidunt vitae. Ut in pretium felis. Sed rutrum, nisi vel commodo accumsan, ante neque mattis neque, quis convallis magna metus molestie erat. Duis aliquet tempus neque ac vestibulum. Morbi nec lectus in lectus blandit blandit sit amet blandit justo. </p>
<p>Sed lorem ligula, rhoncus ac ornare vel, vulputate nec dui. Suspendisse id lectus in est aliquam tristique nec et augue. Morbi non quam id lorem sollicitudin gravida ut ut sem. Aenean nec nunc ac enim sodales laoreet sed quis neque. Maecenas auctor feugiat risus, eget porttitor lorem laoreet porttitor. Ut in ipsum non felis bibendum scelerisque convallis ac nibh. Vivamus nec viverra quam. Nam urna justo, eleifend eget semper ut, tristique non nisl. Duis posuere malesuada metus sed aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nulla tellus, condimentum vitae tincidunt gravida, tristique vel odio. Praesent sed nulla quam, fringilla convallis tellus. Suspendisse potenti. Morbi accumsan elementum placerat. Duis tellus nunc, lacinia non mattis et, varius a magna. Donec consequat viverra massa. Morbi sit amet metus lacus. Curabitur mattis lacinia eros, ac semper nisi dapibus nec. </p>
<p>Duis et diam sit amet metus aliquet cursus. Vivamus lobortis purus id ante accumsan tincidunt. Ut auctor sodales velit, imperdiet aliquet dui facilisis eu. Mauris porta pulvinar tortor ut mattis. Nullam congue sapien ut est luctus egestas. Curabitur eget neque augue. Donec a lacus sed purus consectetur euismod. Vivamus ut odio magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sagittis dui ac odio convallis vel iaculis nibh rutrum. Donec porttitor sapien vel ipsum lacinia ut tristique ante consequat. In sodales malesuada odio, vitae iaculis dui molestie quis. Mauris eu magna at eros viverra pretium. Fusce placerat dolor turpis, id imperdiet orci. Proin sed magna aliquet sem accumsan rutrum. Etiam id sagittis purus. </p>
</li>
<li class="menu cell padd">
<div id="menu1" class="cell padd">
Column 1
</div>
<div id="menu2" class="cell padd">
Column 2
</div>
<!--<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>-->
</li>
</ol>
</div>
</body>
</html>
Here is the CSS:
.container { display:table-row; }
.container .content { width:auto; background-color:#B0B0B0; display:table-cell;}
.container .menu { background:none repeat scroll 0 0 #FFFFEC; display:table-cell; width:350px; }
#menu1 { width:200px; float: left; margin-left: 5px; height:200px; }
#menu2 { width:100px; float: left; margin-left: 5px; height:200px; }
/* Misc */
.table { border: 1px solid #7777A0; }
.row { border: 1px solid #777799; background-color: #A000A0; }
.cell { border: 1px solid black; background-color: white; }
.padd { margin:4px; }
The problem should be obvious when opened in Firefox, the menu column on the right pushes the text in the left column down for some reason.
It looks correct in Opera.
The example uses a list, but can be replaced by divs (makes no difference).
Am I doing something illegal in the stylesheet to provoke this behavior?
Ps. it also looks completely rubbish in IE8.
For whatever reason, adding on .cell just vertical-align: top will sort out the vertical alignment problem.
It looks horrendous in IE8 because you forgot to add a doctype - and so IE8 is rendering in Quirks Mode.
You should add a doctype, such as the HTML5 doctype. You should change the top lines to these:
<!DOCTYPE html>
<html>
Both problems should now be fixed.
It's not easy to explain very well what I'm having problem with so I have attached an image:
http://test.richardknop.com/test.gif
Here is my simplified XHTML markup so far:
<div id="page">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
How to style it?
I'm getting a little bit desperate and I'm not even sure it's possible.
Like this:
#page {
position:relative;
overflow:hidden;
}
#page .images {
position:absolute; bottom:0; left: 0; width: $width-of-sidebar;
}
#sidebar {
padding-bottom: $height-of-the-image;
float:left;
}
To get background in the sidebar you'll need faux columns technique.
Richard, I think your thinking about the problem is wrong. You are thinking about these 2 items as one thing. You need to separate them.
Make footer/border a separate div and make sure it's always at the bottom. I think that's pretty straight forward.
Also make sure that your sidebar is the same size as your content. Put your images in the sidebar - and make them stick to the bottom like your footer. I usually use some sort of framework to make this easier - try out blueprint or elasticss
HTML:
<html>
<head>
<link rel="stylesheet" href="1732288.css" type="text/css" media="screen, projection">
</head>
<body>
<div id="page">
<div id="sidebar">
<div id="sidebar-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat.
</div>
<div id="sidebar-bottom">
<div id = "image-1">
image 1
</div>
<div id = "image-2">
image 2
</div>
</div>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat.
</p>
<p>
Maecenas pellentesque elementum sapien, eu imperdiet turpis scelerisque pulvinar. Proin elit elit, condimentum non lacinia quis, congue vel justo. Sed rutrum magna quis neque sollicitudin vestibulum. Morbi ut eros vitae metus rhoncus sodales. Donec vel velit sed orci imperdiet tristique vel sed odio. Duis eget tellus purus. Sed blandit, tortor nec luctus tempor, tellus elit rutrum nibh, vel egestas libero velit eu libero. Nullam rhoncus, sem in ornare aliquet, dui purus consectetur felis, vitae porta elit leo et eros. Integer pharetra, mauris in lobortis aliquam, est eros commodo ante, sit amet facilisis mauris ipsum pharetra risus. Etiam vel nulla justo. Curabitur pretium facilisis consectetur. Aenean et mauris eros, nec pulvinar diam. Integer ut diam non leo ullamcorper vehicula a in mi. Curabitur adipiscing, enim feugiat porttitor pretium, lacus justo sodales odio, et congue mi sem sed ligula. Etiam accumsan accumsan tortor id pretium.
</p>
<p>
Curabitur quis nunc turpis, vitae vestibulum magna. Aliquam ultrices mi eget arcu convallis feugiat. Integer lacinia ipsum suscipit justo dapibus ultrices. Ut quis arcu vel nibh tincidunt tempus. Quisque imperdiet fermentum leo a ultrices. Donec arcu odio, congue eget elementum a, dignissim at felis. Donec in nibh dui. Curabitur adipiscing consequat urna, sed vehicula neque molestie at. Sed consequat metus velit. Nunc justo neque, tincidunt et faucibus et, mattis sit amet nulla. Integer elementum, purus in malesuada mollis, orci nisi ullamcorper nisl, quis tempor nunc augue et arcu. Integer massa metus, faucibus et vestibulum at, egestas vel enim. Integer condimentum sollicitudin sollicitudin. Nulla volutpat ultricies mauris, eget hendrerit eros accumsan ac. Suspendisse aliquam, lacus ut fringilla auctor, sem sapien elementum nulla, a hendrerit enim turpis vitae dolor. Pellentesque ac mi quis ipsum commodo venenatis.
</p>
</div>
</div>
<div id = "footer">
footer
</div>
</body>
</html>
CSS:
body{
background: #eee;
}
#page{
background: #cccccc;
width: 800px;
}
#sidebar{
background: #999;
width: 200px;
height: 100%;
margin-right: 10px;
float: left;
}
#sidebar-content{
height: 90%;
}
#sidebar-bottom {
height: 50px;
vertical-align: bottom;
}
#image-1{
width: 100px;
float: left;
}
#content{
height: 100%;
left: 200px;
background: #333;
}
#footer{
background: #3ee;
}
You can play around and make it centered and such - but this is the gist of it without using any frameworks.
Here is the solution online :
http://www.gorbikoff.com/stuff/1732288.htm
Css is at:
http://www.gorbikoff.com/stuff/1732288.css