I expect my question has already been answered numerous times but I couldn't find it.
I'm trying to create 2 divs which are next to each other within a container. However as soon as I add content, they overflow. I've included a JSFiddle but for some reason my 2 divs are already appearing outside of the container - it doesn't on my local version. I'd like the div which the content is in to expand as well as the container. Hope I've explained it ok.
JSFiddle
* {
margin:0px;
padding:0px;
}
body {
background-color:#C0D498;
}
#page-wrap {
background-color:#FFF;
width:940px;
margin:0 auto;
margin-top: 40px;
border-radius: 5px;
padding: 20px;
}
.logo {
width:175px;
height:auto;
}
.banner {
width:755px;
height:175px;
float:right;
border-radius: 5px;
background-image:url('images/banner.png');
}
.contentWrap {
padding-bottom: 20px;
}
.contentMain {
width:70%;
background-color:blue;
float:left;
}
.contentSub {
width:30%;
background-color:red;
float:left;
}
replace your html with this:
<div id="page-wrap">
<div class="banner"></div>
<div class="contentWrap">
<div class="contentMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac semper mauris. Maecenas orci dui, auctor ac auctor eu, pretium et mi. Donec interdum diam in est euismod gravida. Curabitur ligula tortor, bibendum nec odio maximus, efficitur lobortis mauris. Vestibulum in est rutrum, imperdiet turpis quis, elementum massa. Sed quis odio ut urna porttitor lobortis. Vivamus feugiat accumsan porttitor. Quisque sed ligula ac neque faucibus tristique. Suspendisse molestie eleifend purus vitae maximus. Proin posuere ante ut velit condimentum aliquam. Nullam pellentesque, mi rhoncus sagittis efficitur, libero ante scelerisque turpis, quis cursus dui libero eget dui. Suspendisse fringilla ut massa at aliquam. Praesent ut tempus erat, nec euismod ligula. Aliquam dui ex, viverra id commodo a, cursus sed sem. Praesent vel egestas nisl.</div>
<div class="contentSub">g</div>
</div>
<div style="clear:both; float:none;"></div>
</div>
The important part is this: <div style="clear:both; float:none;"></div>
and of course you can do it like this (recommended)
<div class="clear"></div>
and CSS
.clear{clear:both; float:none;}
.contentWrap { overflow: hidden; }
only this!
don't know if you want to float your banner
http://jsfiddle.net/flocko/fhrpghjb/
.contentWrap {
padding-bottom: 20px;
clear: both;
overflow: hidden;
}
as a rule of thumb: every element you float - you should clear in the parent element.
a clearfix class could help you on your way: http://nicolasgallagher.com/micro-clearfix-hack/
Related
I have an image placed next to text, both inline-block elements, and am having difficulty centering them. I've tried including both in a div and applying text-align:center, but nothing changes. I've also thought about changing h1 to display:block and then applying text-align:center, but I'd like both the text and title to be centered relative to the content below it, instead of the whole thing being slightly off-centered from the placement of the image.
HTML:
<img src="logo.svg">
<h1 id="logo-text">TITLE</h1>
CSS:
header img {
display:inline-block;
margin:0 auto;
height:50px;
}
header h1#logo-text {
display:inline-block;
float:none;
margin:0 auto;
height:50px;
line-height:50px;
}
header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
header img {
height: 50px;
}
header h1#logo-text {
display: inline-block;
margin: 0;
height: 50px;
line-height: 50px;
}
<header>
<img src="https://unsplash.it/200">
<h1 id="logo-text">TITLE</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit eu diam et dapibus. Vestibulum mattis augue et gravida tincidunt. Etiam congue nisl id sem ornare, ac dignissim est aliquet. Aenean at venenatis est. Maecenas nunc tellus, imperdiet
nec eros eu, ultrices euismod turpis. Donec faucibus gravida lectus, sit amet maximus nulla posuere id. Aliquam pulvinar dui non arcu tincidunt, nec maximus sem pretium. Sed aliquet dolor ac lectus aliquam, sit amet aliquam tortor imperdiet. Proin vitae
diam tincidunt elit lobortis ultricies. Praesent tristique ex scelerisque posuere placerat.</p>
<p>Suspendisse potenti. Curabitur vel dictum odio. In congue egestas odio at lacinia. Aliquam vehicula felis nec faucibus vestibulum. Morbi sed augue accumsan, eleifend elit eget, luctus urna. Integer quis facilisis est. Ut at pretium erat. Mauris at neque
justo. Ut eu ligula pretium, volutpat justo quis, malesuada turpis. Integer id consectetur urna. Etiam mauris enim, mattis ac finibus id, volutpat eget sapien. Donec quis libero sapien.</p>
You can use flex to position it in the center, without any dirty hacks. No extra mark-up required.
header img {
display:inline-block;
margin:0 auto;
height:50px;
}
header h1#logo-text {
display:inline-block;
float:none;
margin:0 auto;
height:50px;
line-height:50px;
}
<header style="text-align:center;" >
<img src="http://www.lessons4living.com/images/penclchk.gif">
<div style="clear:both;display:block;" ></div>
<h1 id="logo-text">TITLE</h1>
</header>
Add the following css rule.
header{text-align: center;}
To start, I am aware that this question has been asked many times previously, and answered about as many times as it has been asked. Unfortunately I have not been able to get the solutions provided here, here and here to work for me.
I have only been using html and css for a few weeks, teaching myself through Codecademy. Sadly Codecademy's positioning tutorials are littered with bugs so the code I have here is the product of much trial and error and I'm not sure if any of it has been setup "correctly".
Without further ado, here's my current code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Header Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
CSS
html, body {
height:100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 75px;
padding: 10px;
background-color: red;
}
.content {
height:100%;
}
.footer {
width:100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: red;
}
This code makes me a header and footer with a content div between them. However, the content div is 0px tall. I would like the div to stretch from the bottom of the header to the top of the footer.
Here's a JSFiddle of my current code. Thanks in advance for any help.
The 'modern' way is to use flexbox
DEMO
.wrapper {
min-height: 100%;
position: relative;
display:flex;
flex-direction: column;
justify-content: flex-start;
}
.content {
flex:1;
background:pink;
}
Edit: DEMO USING TABLE
Here is your solution.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 75px;
padding: 10px;
background-color: red;
}
.content {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: blue;
}
.footer {
width: 100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: orange;
}
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
I think you need this code:
.content {
height:100vh;
}
Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.[reference]
Your code is working actually. If <div class"content"> is empty then the height is 0px. Otherwise use fixed height value.
HTML:
<body>
<div id="header"></div>
<div id="content"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada diam eu aliquet pretium. Donec dapibus condimentum lectus a porta. Fusce sed augue bibendum, egestas nisi rhoncus, varius lectus. Nullam vitae erat vitae purus dapibus aliquet. Praesent id urna aliquet, interdum mi sit amet, dictum nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris facilisis sodales ligula, nec pulvinar neque ornare et. Vivamus ultrices odio venenatis lectus semper, at luctus sem tempus. Ut molestie sem ac faucibus pulvinar. Ut in massa et mauris congue accumsan at eu magna. Sed augue risus, varius eget vehicula eget, fringilla in magna. Proin tempus ante leo, non tempor justo cursus a. Sed a posuere nisl.
Nulla imperdiet nulla auctor tellus ultricies, quis cursus libero finibus. Praesent sed justo nec ex blandit pretium non in eros. Praesent a mollis ante. Donec sit amet vehicula quam, ut euismod dolor. Vivamus vitae faucibus felis. Ut eget condimentum arcu. Curabitur vel felis tortor. Quisque a semper neque. Fusce a diam ac elit fringilla sodales sit amet vel ligula.
Donec blandit congue commodo. Etiam dolor tellus, viverra et molestie vel, bibendum non diam. Vivamus dignissim ac sapien eget vulputate. Pellentesque eu ex nec tellus malesuada sollicitudin. Vivamus non erat eu est dapibus accumsan nec a erat. Donec a ligula tellus. Maecenas et ullamcorper urna.
Morbi maximus, quam a vulputate hendrerit, augue enim consectetur massa, vel tristique dui felis vel leo. Ut id pellentesque nisi, eget congue magna. Nunc vitae auctor quam. Etiam varius, nisi sed cursus faucibus, felis metus luctus enim, eu consectetur elit nulla ut magna. Donec mi tortor, ultricies eget fringilla vitae, fringilla et nisl. Vestibulum vestibulum neque leo, in viverra sapien vehicula quis. Donec fermentum placerat dignissim. Duis vestibulum dolor a tellus eleifend ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis suscipit diam. Vivamus tristique dignissim fermentum. Phasellus eu cursus ipsum. Quisque magna purus, ultrices quis dolor vitae, dignissim pharetra nisi. Sed sollicitudin blandit nulla, a consequat lorem congue in. Fusce a dapibus orci. Aenean sed laoreet ex.
Aenean eget volutpat dui, a eleifend sem. Fusce malesuada sodales dapibus. Cras gravida ornare mauris, a ullamcorper massa pulvinar eu. Proin facilisis dapibus commodo. Nullam ac sem ultrices, iaculis nulla at, pulvinar velit. Cras auctor, mauris sit amet viverra tristique, nunc turpis faucibus lacus, at rutrum massa diam eu nisi. Aenean facilisis metus tempor accumsan tristique. Phasellus condimentum mauris a neque iaculis pretium ut vitae ligula. Vivamus congue mi eget sagittis iaculis. Praesent urna ipsum, porta in eros et, commodo vulputate odio. Vestibulum bibendum arcu sit amet orci viverra pellentesque. Etiam pellentesque sodales nisi, sit amet consequat mi ornare ut. Donec non cursus velit.
</div>
</div>
<div id="footer"></div>
</body>
CSS:
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}
I am creating mega drop down menu. It is all done by HTML and CSS. My problem is that when you select one of LIs, it gets maximalized at the expense of the other LIs.
I do not know where should be the problem, could you give me a suggestion how to solve it?
HTML
<div id="wrapper">
<div id="menu2">
<ul id="menu2_ul">
<li class="list">Domů
<div class="sub">
<div class="submenu">
<ul class="submenu_left_menu">
<li>Domů</li>
<li>Pojištění</li>
<li>Půjčky</li>
<li>Hypotéky</li>
<li>Účty a spoření</li>
<li>Energie</li>
<li>Investice</li>
<li>Slevy</li>
</ul>
</div>
<div class="submenu_content">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p>
</div>
<div class="submenu_poll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p>
</div>
</div>
</li>
<li class="list">Pojištění
<div class="sub">
<div class="submenu">
<ul class="submenu_left_menu">
<li>Domů</li>
<li>Pojištění</li>
<li>Půjčky</li>
<li>Hypotéky</li>
<li>Účty a spoření</li>
<li>Energie</li>
<li>Investice</li>
<li>Slevy</li>
</ul>
</div>
<div class="submenu_content">
</div>
<div class="submenu_poll">
</div>
</div>
</li>
</div>
</div>
CSS
body {
background-color: black;
padding: 0px;
margin: 0px;
}
#wrapper {
margin: 0px;
padding: 0px;
height: 40px;
background-color: white;
}
#menu2 {
width: 981px;
margin: 0 auto;
padding: 0px;
}
#menu2 ul {
list-style: none;
display: table;
margin: 0px;
padding: 0px;
height: 40px;
}
#menu2 li.list {
display: table-cell;
line-height: 40px;
border-left: 1px solid grey;
position: relative;
}
#menu2 div.sub {
margin:0;
display:none;
background-color: white;
}
#menu2 li.list:hover div.sub {
display: block !important;
width: 981px !important;
}
/******************************************************************************\
\******************************************************************************/
#menu2 div.sub .submenu {
float: left;
width: 220px;
}
#menu2 div.sub .submenu_content {
width: 550px;
float: left;
}
#menu2 div.sub .submenu_poll {
}
1. Set the div.sub to absolute
Yes, they will not have the same starting position: so the solution is to manually give each one of them a margin-left minus value. You can either give them all and id, or use CSS3 selectors (e.g. #menu2:nth-child(1) {margin-left: -...}) .
Disadvantage: Manually specify an id and a specific margin-left for every div.sub + to make it easier you will probably have to give the menu tabs the same width.
2. Set the div.sub to fixed
In this case, every div will start at exactly the same position; however be careful that it's width or height aren't superior to another element, because the document won't stretch for fixed pos elements.
Disadvantage: Won't work if you have other divs after it because the fixed div will follow the screen. Won't work if no other elements are larger than the divs.sub IN the flow of the document.
3. Experiment with the CSS3 :target selector
Target selectors can modify the link in the href of an anchor. An Example here. However, you will have to specify id's for every div.sub. This selector also allows you to put all your div.sub's directly in your content section instead of nesting them for each menu item. Not compatible with IE8-.
Disadvantage: Not compatible with IE8-
4. Use js/jQuery instead
Probably the 'easiest' way for some, but also the most 'heavy' one.
Disadvantage: Heavier, won't work in JS-disabled browsers.
I have a bit of a problem placing a footer. It's supposed to float above 2 side by side columns (http://imgur.com/dfiT1). Now the problem is, it needs to be aligned well so that the border of the 2 columns is aligned with the border of the 2 parts of the footer, AND, it needs to have a minimum margin of say 100px on both columns, so that the footer doesn't float above the content of either of the columns when a page has very little or a lot of content.
I've tried resolving this with a coworker by using an extra wrapper, a clearfix, jquery for height adjustment but we can't seem to find a solution.
so in short: Footer needs to stick to the same position in big and small resolutions, minimal margin-top on both columns
Try do add min-height: 100%; to both columns, and put them in the same div.
The best solution, in my opinion, would be to place the footer outside of the two columns. But I know that sometimes there are constraints that you can't change, so a possible solution would be:
HTML
<div class="wrapper"><div id="column1" class="column">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl purus, lobortis et adipiscing non, vestibulum et tortor. Praesent aliquam placerat enim sit amet blandit. In ipsum dui, accumsan at hendrerit nec, tempus in augue. Etiam molestie, orci a feugiat tempus, nunc quam posuere libero, et ultrices libero sem porta arcu. Donec varius, massa at feugiat accumsan, mi lacus aliquam arcu, id faucibus arcu felis et sapien. Praesent sit amet tortor nibh. Nam mollis, ante quis iaculis fringilla, ante sapien dignissim ligula, in dignissim urna nisl ut ante. Mauris eget diam justo, nec tempor justo. Donec vel eros eget risus rhoncus dapibus. Nullam at felis faucibus orci molestie feugiat sit amet ut augue. Vestibulum at tellus tortor, non tempus quam. Phasellus adipiscing ante a purus congue ultrices in non justo. Ut ullamcorper porttitor quam, sit amet tincidunt mauris hendrerit at.
</div>
<div class="footer">
Donec facilisis accumsan nisl
</div>
</div><div id="column2" class="column">
<div class="content">
Aenean pharetra sagittis ipsum, vitae pulvinar nunc aliquet ut. Fusce sit amet elit dui, a vulputate risus. Maecenas in laoreet tortor.
</div>
<div class="footer">
Pellentesque malesuada ligula eget justo
</div>
</div>
</div>
CSS
html, body, .wrapper {
margin:0;
border:0;
outline:0;
}
.column {
display:inline-block;
margin:0;
padding:0;
vertical-align:top;
}
#column1 {
width: 30%;
background-color:teal;
}
#column2{
width: 70%;
background-color:coral;
}
.wrapper{
position: relative;
background-color: black;
padding-bottom: 200px;
}
.footer {
position: absolute;
bottom: 50px;
background-color: silver;
}
#column1 .footer {
right: 70%;
}
#column2 .footer {
left: 30%;
}
live demo
There would be other solutions, but this one seems the easiest to me, as lond as the footer's height is constant.
Okay, my problem is that #main_content is the child of #content but it will not display in #content. I need for #content to vertically expand to #main_content's size. Also, #content is a part of #main_wrap, which should extend all the way to #footer. Any help would be greatly appreciated.
#main_wrap {
width: 850px;
margin-top:15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top {
width: 850px;
height: 288px;
}
#top_content {
width:850px;
height:250px;
}
#nav {
background-color:#333;
height:38px;
#content {
width:850px;
padding-top:15px;
padding-bottom:15px;
}
#main_content {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
float:left;
width:850px;
height:auto;
}
#footer {
float: left;
width:100%;
height:250px;
background-image:url(images/footer_bg_blue.png);
background-repeat:repeat-x;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
}
#footer_cont {
padding-top:15px;
padding-bottom:15px;
}
<div id="main_wrap">
<div id="top">
<div id="top_content">
</div>
<div id="nav">
</div>
</div>
<div id="content">
<!--<div id="sidebar">
</div>-->
<div id="main_content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero risus, tincidunt a placerat vel, dignissim eget ligula. Mauris lobortis adipiscing orci, ut scelerisque nibh rhoncus nec. In metus ante, bibendum ac hendrerit et, vulputate id dolor. Sed et tellus at ipsum molestie tempus. Ut vitae vulputate sem. Sed sed ipsum elit, eget adipiscing magna. Sed et nisl eros, vitae convallis dui. Nullam nec feugiat nisi. Praesent in tortor ut enim molestie fermentum a et enim. Proin at porttitor ligula. Nulla vitae vulputate mauris. Donec auctor odio elit, vel egestas justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec suscipit pretium mollis. Sed egestas hendrerit quam eu pellentesque. Phasellus pharetra urna in mauris bibendum interdum. Pellentesque pellentesque pellentesque eros, eu adipiscing lectus fermentum id. Nullam iaculis, nisi auctor tincidunt hendrerit, eros quam accumsan elit, at cursus quam quam ac leo</p>
</div>
</div>
<!--</div>-->
<div id="footer">
<div id="footer_cont">
test
</div>
</div>
You can specify overflow: hidden; for your #content div to expand its height all the way to the footer, as you can see at this jsFiddle, http://jsfiddle.net/68FFL/2/. I'm not really sure why that works. If you look at the WordPress.com Mystique theme demo, you'll see that they use that rule to expand their #main div, otherwise it has no height like yours did.
I'm not entirely sure, but I think one of the reasons why you're #content div had no height was because it had child elements that weren't in the document flow on the inside, because they were floated. If you put another element inside that isn't floated, then the height of the div will expand, as you can see here, http://jsfiddle.net/68FFL/3/