I am trying to make a forum but the problem is that the div where the text goes doesn't expand in height when the text becomes to long for the div. Instead the text goes outside.
I also need the sidebar (with the userinformation) to expand with the text so it always has the same height as the text.
JSFiddle: http://jsfiddle.net/9stPU/1/
CSS:
.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
margin-left: 50px;
}
.forumContent li {
padding: 5px 0 5px 10px;
margin-left: -40px;
min-height: 41px;
}
.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}
.forumContent li small {
font-size: 9px;
}
.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}
.forumContent li:hover {
background: #3E5368;
}
.forumContent a li {
float: left;
width: 366px;
}
.forumContent a li:first-child {
width: 100px;
}
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
height: 100%;
}
.topicUser h3 {
margin-left: 2.5px !important;
}
.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7.5px;
}
.topicUser p {
margin-top: 2px;
margin-left: 3px;
}
.topicContent {
width: 1060px;
float: right;
height: 100%;
}
ADD :
.forumContent {
...
overflow: hidden; /* ADD THIS */
}
This problem occurs because the height of the container element forumContent is calculated automatically (if it is not specified) as the the sum of the height of non float elements. the height of float elements is not considerate.
Related
I'm trying to position a text on a contentslider. Sadly it seems like nothing could change the text margin to what I want it to be.
Actually it does look like: https://gyazo.com/dd9ef0f78b5caaf7a582d9825955284b
Live Preview: http://projects.helpful.ninja/BlackzDesignz/Template_1/index.php
This is how I want it to look: https://gyazo.com/631efa979e78732c2c817fb2abf08716
Css code:
#fc_slider_wrap,
#fc_slider_wrap * {
padding: 0;
margin: 0;
outline: 0;
}
#fc_slider_wrap {
width: 755px;
height: 239px;
margin: auto;
font-family: Verdana, Arial;
color: #fff;
font-size: 11px;
overflow: hidden;
position: relative;
}
#fc_slider_img {
width: 550px;
height: 239px;
z-index: 50;
clip: rect(0 0 550px 287px);
float: left;
overflow: hidden;
}
#fc_slider_slide > div > span {
display: none;
}
#fc_slider_slide {
}
#fc_slider_slide > div {
border-radius: 2px;
overflow: hidden;
}
#fc_slider_slide > div > img {
display: block;
border-radius: 2px;
}
#fc_slider_nav {
width: 203px;
height: 287px;
float: right;
}
#fc_slider_nav > div {
height: 47px;
width: 198px;
background: url(../fc_slider/img/nav_opt_bg.png) repeat-x left top transparent;
padding-right: 5px;
margin-bottom: 1px;
cursor: pointer;
}
#fc_slider_nav > div.active {
background-image: url(../fc_slider/img/nav_opt_bg_h.png);
color: #212121;
}
#fc_slider_nav > div > img {
float: left;
margin: 2px;
margin-top: 11px;
}
#fc_slider_nav > div > span {
line-height: 15px;
padding: 2px 12px 2px 0;
text-align: left;
}
#fc_slider_caption {
position: absolute;
padding: 10px;
bottom: 0;
width: 530px;
background: url(../fc_slider/img/black_semi.png) repeat left top transparent;
float: left;
border-radius: 2px;
z-index: 50;
}
#fc_slider_pause {
display: none;
position: absolute;
width: 18px;
height: 18px;
left: 4px;
top: 4px;
z-index: 50;
}
Does anyone have a idea, what I'm doing wrong? Apreciate any kind of help.
Adding Top:5px; position:relative; in #fc_slider_nav > div > span should make it work
I'm having a strange CSS problem where the main div container on my website shifts to the right when I visit certain pages. This happens even though there is no specific CSS rule to move it
I've uploaded a temp version of my site here:
http://myawesometestsite.ddns.net/
When you go to the Publications and Contact page the entire container shifts to the right by a few pixels. The position appears to be correct and unshifted on all other pages
This is the full CSS I'm using:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
}
h1 {
font-size: 1.5em;
color: #832C00;
margin-bottom: 30px;
}
h2 {
font-size: 1.2em;
color: #832C00;
margin-top: 30px;
}
h3 {
font-size: 1em;
margin-bottom: 5px;
margin-top: 20px;
}
h4 {
font-size: 1em;
font-style: italic;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 5px;
}
.container {
position: relative;
left: 50%;
margin-left: -470px;
width: 940px;
border: 1px solid black;
}
/*
Header
*/
header {
position: relative;
display: inline-block;
width: 100%;
height: 180px;
background-color: #a63700;
}
header h1 {
position: absolute;
font-size: 2.5em;
color: #e6e6dc;
top: 50px;
left: 100px;
margin: 0px;
}
header h2 {
position: absolute;
font-size: 0.77em;
color: #e6e6dc;
top: 100px;
left: 100px;
margin: 0px;
opacity: 0.7;
}
header img {
border: 2px solid #e6e6dc;
border-radius: 50%;
max-width: 100%;
max-height: 100%;
}
.profileImage {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-width: 150px;
max-height: 150px;
}
.skillIcons {
position: absolute;
right: 25px;
top: 15px;
}
.skillIcons img {
display: inline;
width: 75px;
height: 75px;
padding: 5px;
margin: 15px;
opacity: 0.7;
}
/*
Navigation menu
*/
nav {
position: relative;
z-index: 1;
text-align: center;
letter-spacing: 2px;
background-color: #a63700;
height: 50px;
width: 100%;
}
nav a {
position: relative;
top: 20px;
color: #D1D1C9;
text-decoration: none;
padding: 0 30px;
}
nav a:hover {
border-bottom: solid 1px #e6e6dc;
padding-bottom: 3px;
}
.navSelected {
text-shadow:0px 0px 1px white;
color: white;
}
/*
Main content
*/
main {
position: relative;
background-color: white;
padding: 10px;
}
/*
Footer
*/
footer {
position: relative;
color: #e6e6dc;
background-color: #a63700;
font-size: 10pt;
padding: 10px;
}
.leftFooter ul {
padding-left: 0px;
}
.leftFooter li {
display: inline;
list-style-type: none;
}
.leftFooter li a {
color: #e6e6dc;
text-decoration: none;
}
.leftFooter li + li:before {
color: #e6e6dc;
content: "|";
padding: 10px;
}
.rightFooter {
position: absolute;
right: 10px;
top: 4px;
}
.rightFooter img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
margin-top: -3px;
}
.copyright {
font-size: 1em;
}
/*
Home page
*/
/*
Publications page
*/
.hangingIndent {
padding-left: 1.5em;
text-indent:-1.5em;
}
.publications h2 {
margin-top: 50px;
}
/*
Code page
*/
.codeProjects a {
color: #a63700;
text-decoration: none;
}
.codeProjects a:hover {
text-decoration: underline;
}
.codeProjects p {
margin-left: 10px;
}
/*
CV page
*/
.cvContainer {
width: 90%;
margin: 0 auto;
}
.cvEntry {
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
.sectionHeading {
width: 100%;
border-bottom: 1px solid #000;
}
.alignLeft {
display: block;
float: left;
text-align: left;
width: 80%;
margin-top: 10px;
}
.alignLeft p {
font-size: 1em;
}
.alignLeftSub {
margin-top: -10px;
margin-left: 20px;
}
.alignRight {
display: block;
float: right;
text-align: right;
width: 20%;
margin-top: 10px;
}
.clear {
clear: both;
}
/*
Contact page
*/
.contactInfo {
margin-left: 20px;
}
.contactInfo img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
}
.emailHidden {
display: none;
}
.contactInfo a {
margin-left: 5px;
color: #a63700;
text-decoration: none;
}
.contactInfo #emailAddress {
margin-left: 2px;
}
.contactInfo #emailAddress a {
margin-left: 8px;
}
/*
Media queries
*/
#media screen and (max-width : 940px) {
.container {
position: relative;
left: 0px;
margin: 0px;
width: 100%;
}
header h1 {
left: 5%;
margin: 0px;
}
header h2 {
left: 5%;
margin: 0px;
}
.skillIcons img {
max-width: 70px;
max-height: 70px;
margin-left: 5px;
margin-right: 0px;
}
}
#media screen and (max-width : 800px) {
header h1 {
display: none;
}
header h2 {
display: none;
}
.skillIcons img {
display: none;
}
nav {
height: 150px;
}
nav a {
display: block;
}
nav a:hover {
border-bottom: none;
padding-bottom: 0px;
}
}
#media screen and (max-width : 600px) {
.rightFooter {
position: relative;
display: block;
margin-left: 10px;
}
}
I don't believe there's anything in here that's causing the container to shift for just those 2 pages but maybe I'm missing something. Anyone have any idea whats causing this?
Add "overflow-y: scroll;" to your "body" selector. It should look like this in your CSS:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
overflow-y: scroll;
}
The lenght of the pages create a vertical scroll bar. Publication and contact are small then the other are more big then the screen. for fix this you need an overflow-y set to scroll;
body {
overflow-y: scroll;
}
So I am developing a little forum and I ran into a little design problem. The sidebar in each post is supposed to match the height of the content (the text written) but the sidebar only goes to the height necessary to display everything and then stops.
JSFiddle: http://jsfiddle.net/9stPU/5/
CSS:
.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
}
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
}
.forumContent li:last-child {
border-bottom: none;
}
.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}
.forumContent li small {
font-size: 9px;
}
.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}
.forumContent li:hover {
background: #3E5368;
}
.forumContent a li {
float: left;
width: 366px;
}
.forumContent a li:first-child {
width: 100px;
}
.forumContent li .new b {
font-size: 12px;
}
.forumContent li .new {
float: right;
margin-right: 8px;
margin-top: -2px;
font-size: 9px;
background: #2c3e50;
padding: 4px;
border-radius: 6px;
}
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
}
.topicUser h3 {
margin-left: 2 .5px !important;
}
.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7 .5px;
}
.topicUser p {
margin-top: 2px;
margin-left: 3px;
}
.topicContent {
width: 1060px;
float: right;
height: 100%;
}
.topicContent p {
padding: 5px;
}
You can use display:table; properties: DEMO
a single patch to test it ;
li {
display:table;
}
li > div {
display:table-cell;
float:none!important;/* float kills display; so do not use it with display; */
vertical-align:top;
}
Put:
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
position: relative;
}
and
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
position:absolute;
}
notice position properties.
Look here http://jsfiddle.net/9stPU/6/
Sorry for a weird title but I don't really know how to describe it easily.
First I'll link my JSFiddle on it http://jsfiddle.net/b7YTd/
When I added the "float: left" and "float: right" the rows jumped outside the box and the box doesn't expand as the content gets "larger".
My question is, how do I make the box expand after the content like it should do with content inside it if it doesn't have a set height?
In order to post my JSFiddle I need to add some code so my CSS:
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
}
.friend_left {
float: left;
width: 250px;
}
.friend_right {
float: right;
width: 250px;
}
.friend img {
width: 50px;
height: 50px;
float: left;
margin-left: 15px;
margin-right: 8px;
}
.friend ul {
list-style-type: none;
margin-top: -15px;
margin-left: 35px;
}
#profile_friends h4 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
color: rgb(110,110,110);
font-weight: bold;
height: 20px;
}
#profile_friends hr {
margin: 0;
padding: 0;
}
If I understand you correctly use:
#friendlist {
overflow: auto;
}
http://jsfiddle.net/b7YTd/1/
I had this issue, but used overflow:hidden; on the parent div.
http://jsfiddle.net/b7YTd/3/
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
overflow:hidden;
}
Assume following html page:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="leftcolumn"/>
<div id="content/>
<div id="footer"/>
</div>
</body>
</html>
What I'm trying to achieve is that the leftcolumn div and the content div always have the same height. Sometimes the leftcolumn div is higher than the content div because there is little content and vice versa: when there is a lot of content, the content div is higher than the leftcolumn div.
The situation as it is now produces some lay-out shenanigans because the body background, leftcolumn background and content background are all in a different colour.
This is my CSS as-is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
height: auto;
}
#content {
float: left;
color: #006350;
background: #DEE3DC;
height: 100%;
display: inline;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#leftcolumn {
color: white;
background: #006350;
height: 100%;
width: 170px;
float: left;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
I've tried using a combination of CSS styles like height: 100%, height:inherit, height:auto,... on the different divs (wrapper, leftcolumn and content) but I can't seem to get the result I want. Bottom line: what CSS styles should I use if I want the leftcolumn and content div have the same height, regardless of which one is higher at that time. (And without using javascript please).
JsFiddle example where the leftcolumn is larger: http://jsfiddle.net/CQPnF/4/
Example where the content is larger: http://jsfiddle.net/BQkme/
You can get your desired results with the use of display:table-cell rather float in your left and right panels :-
I have removed float from your #content & #leftcolummn and gave them display:table-cell; and its working fine as per your requirement.
UPDATED CSS
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
overflow:hidden;
}
#content {
color: #006350;
background: #DEE3DC;
display:table-cell;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#container {
border:1px solid red;
overflow:hidden;
}
#leftcolumn {
color: white;
background: #006350;
width: 170px;
display:table-cell;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
see the demo :- http://jsfiddle.net/BQkme/10/
This solution is a teensy bit hacky because you need some supporting markup, but it does work and I have used it before.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
The main issue I have with it is that you have to nest your content divs to a depth equaling the number of columns. In your case, it's not a huge problem because you'd only be nesting your content inside 2 container divs.
Your markup might end up looking something like the following:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="container_content">
<div id="container_leftcolumn">
<div id="leftcolumn"/>
<div id="content/>
</div>
</div>
<div id="footer"/>
</div>
</body>
</html>
You need to use absolute positioning.
Here is a working Live Demo.
Hope this helps.