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;
}
Related
I have a fiddle in which I want to align few images (keyboard, computer and handshake) and text inline with the rectangle box (having some text) exactly like these images.
I tried making them inline by using display inline-block, display: block, margin-left:auto, margin-right:auto but still I am unable to replicate it.
The snippets of HTML code which I am using is:
.openings {
height: 650px;
width: 100%;
}
.openings .headline-text:before {
border-top: 1px solid #1072B8;
display: block;
position: relative;
top: -25px;
margin: 0 auto;
width: 50%;
content: "";
}
.openings .headline-text {
text-align: center;
font-size: 24px;
color: #1072B8;
padding-bottom: 80px;
padding-top: 160px;
font-weight: bold;
}
.openings .rectangle {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
margin-right: 400px;
width: 300px;
height: 100px;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 100px;
float: right;
}
.section {
margin-left: 300px;
float: left;
font-style: italic;
font-weight: bold;
font-size: 1rem;
color: #1072B8;
}
.openings .job-opening {
clear: both;
height: 150px;
}
.openings {
height: 1480px;
width: 100%;
}
Hey I'm currently working on a responsive web design for school and it is a disaster. Currently setting up the website before making it responsive and the text and images aren't going where I need them to go. This is my coding for css so far:
body{
background-color: #cd76dd;
font-family: 'Raspoutine Medium';
color:white;
}
#page-wrap{
width: 950px;
margin: 0 auto;
}
#containerIntro h1{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
font-size: 45px;
width: 100%;
padding-bottom: 10px;
position: static;
bottom: 0;
left: 0;
}
#containerIntro p{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
text-align: left;
font-size: 70px;
width: 100%;
}
h1: hover{
text-shadow: 0px 0px 20px white;
}
h1 p: hover{
text-shadow: 0px 0px 20px white;
}
h1{
position: absolute;
left: 0;
bottom: 0;
}
p{
background-color:#ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font-size: 17px;
width: 450px;
height: 100%;
}
h2{
background-color: #ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-left: 10px;
font-size: 20px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
h3{
background-color: #ffa1ff;
color:white;
text-align: left;
font-size: 20px;
padding-left: 10px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
.gummy{
float: right;
}
.bubble{
float: right;
position: relative; right: -130px;
padding-top: 15px;
}
.pink{
float: left;
position: relative; top: -145px;
}
.blue{
float: right;
position: relative; top: -145px;
}
p.select{
background-color: #5d75ed;
text-align: right;
padding-bottom:10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -850px;
}
p.archives{
background-color: #f9e075;
text-align: right;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -600px;
}
p.resources{
background-color: #ef5b66;
padding-bottom: 10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float:right;
margin-top: -500px;
}
div{
height: 287;
width: 198;
}
mock up for what it will look like
Inside of #containerIntro h1, you don't need to add position: static due to that being already set by default. Plus if an element is static, direction properties such as bottom, top, left, and right are completely ignored.
Try to use the property called clear and set it to both...
p {
clear: both;/*Element should have no other elements on the left and right side*/
}
clear:both; gets rid of floating objects on both the left and right sides of an element. I hope this helps!
I would like to vertically align 2 divs - a footer div at the bottom of my page (about 15px margin from the bottom), and a content div in the center of the page). The webpage will be responsive. Her is the jsfiddle of the page:
https://jsfiddle.net/tyvodoh0/1/
<div class="wrapper">
<div class='center'>
<div id='content'>
<div id='profile_pic'>
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/>
</div>
<div id='information'>
<h1>Title</h1>
<h2>Subtitle</h2>
<p> 4
down vote
favorite
Does the position of the sun in a hollow earth scenario affect the way light scattering would "color" the sky?
My understanding is the reddish-orange color during sunrise/sunset is caused by the sun being at a more oblique angle in contrast to the standard blue when the sun is fully up.
My intuition states that the sky's color wouldn't change much, or if it did would become a washed out version of whatever it normally would be, ie blue on Earth. The most dramatic coloring that I could imagine would be a gradient from say blue to red as you look from the center of the sky to the horizon, given an Earth colored sun and atmosphere. I doubt the gradient scenario is possible, but it would be neat if it was.
</p>
</div>
</div>
<div class='footer'>
<p>
Div to be set at bottom
</p>
</div>
</div>
</div>
/* css */
h1 {
color: #3a2a0c;
font-size: 47px;
text-transform: uppercase;
margin-bottom: 14px;
}
h2 {
color: #3a2a0c;
font-size: 28px;
text-transform: capitalize;
margin-bottom: 14px;
}
h3 {
color: #926d55;
font-size: 15px;
margin-bottom: 40px;
}
p {
color: #3a2a0c;
font-size: 15px;
text-align: justify;
line-height: 110%;
border-bottom: 1px solid #caccc6;
}
hr {
border-color: #3edf4f6;
margin-top: 50px;
}
.wrapper {
background-color: rgba(255,255,255,0.9);
padding: 0;
margin: 0;
top: 0;
left: 0;
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.center {
display: table-cell;
vertical-align: middle;
background: pink;
float: none;
}
#content {
margin-left: auto;
margin-right: auto;
width: 1235px;
background: red;
}
#profile_pic {
width: 396px;
padding-right: 33px;
float: left;
background: blue;
}
#profile_pic img {
width: 396px;
height: auto;
}
}
#information {
width: 806px;
background: yellow;
float: left;
}
#contact {
font-size: 15px;
color: #926d55;
}
.hide {
display: none;
}
#contact span {
margin-right:22px;
}
#information p {
padding: 40px 0;
}
#left {
float: left;
}
#right {
float: right;
}
.links {
padding-top: 15px;
font-size: 15px;
}
.links img {
margin-right: 6px;
}
.links a {
margin-left: 6px;
margin-right: 6px;
color: #3a2a0c;
}
.links a:last-child {
margin-right: 0px;
}
.links a:hover {
color: #926d55;
}
.footer {
float: none;
position: absolute;
top: 90%;
}
I edited your code to make it responsive. You can work further to fix the position of the image when the window is resize.
h1 {
color: #3a2a0c;
font-size: 47px;
text-transform: uppercase;
margin-bottom: 14px;
}
h2 {
color: #3a2a0c;
font-size: 28px;
text-transform: capitalize;
margin-bottom: 14px;
}
h3 {
color: #926d55;
font-size: 15px;
margin-bottom: 40px;
}
p {
color: #3a2a0c;
font-size: 15px;
text-align: justify;
line-height: 110%;
border-bottom: 1px solid #caccc6;
}
hr {
border-color: #3edf4f6;
margin-top: 50px;
}
.wrapper {
background-color: rgba(255,255,255,0.9);
padding: 0;
margin: 0;
top: 0;
left: 0;
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.center {
display: table-cell;
vertical-align: middle;
background: pink;
float: none;
}
#content {
margin: auto;
width: 100%;
background: red;
padding: 10px;
}
#profile_pic {
width: 396px;
padding-right: 33px;
float: left;
background: blue;
}
#profile_pic img {
width: 396px;
height: auto;
}
/*
#information {
width: 806px;
background: yellow;
float: left;
}
*/
#contact {
font-size: 15px;
color: #926d55;
}
.hide {
display: none;
}
#contact span {
margin-right:22px;
}
#information p {
padding: 40px 0;
}
#left {
float: left;
}
#right {
float: right;
}
.links {
padding-top: 15px;
font-size: 15px;
}
.links img {
margin-right: 6px;
}
.links a {
margin-left: 6px;
margin-right: 6px;
color: #3a2a0c;
}
.links a:last-child {
margin-right: 0px;
}
.links a:hover {
color: #926d55;
}
.footer {
float: none;
top: 90%;
width: 100%;
padding: 10px;
}
<div class="wrapper">
<div class='center'>
<div id='content'>
<div id='profile_pic'>
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/>
</div>
<div id='information'>
<h1>Title</h1>
<h2>Subtitle</h2>
<p> 4
down vote
favorite
Does the position of the sun in a hollow earth scenario affect the way light scattering would "color" the sky?
My understanding is the reddish-orange color during sunrise/sunset is caused by the sun being at a more oblique angle in contrast to the standard blue when the sun is fully up.
My intuition states that the sky's color wouldn't change much, or if it did would become a washed out version of whatever it normally would be, ie blue on Earth. The most dramatic coloring that I could imagine would be a gradient from say blue to red as you look from the center of the sky to the horizon, given an Earth colored sun and atmosphere. I doubt the gradient scenario is possible, but it would be neat if it was.
</p>
</div>
</div>
<div class='footer'>
<p>Div to be set at bottom</p>
</div>
</div>
</div>
The height of the .wrapper is set to: height:100%, you can remove it if you do not need it.
From what I can see you want the wrapper div to cover the 100% of the height and the width of the page, and in order to set the footer at the bottom of the page you need to change the footer class to
.footer {
margin-bottom: 15px;
position: absolute;
bottom: 0;
}
This will allow the div to stay at the bottom with a margin of 15 px.
When trying to display image effects on my website they don't display.
If I run the image on jsfiddle.net it works perfectly fine. However my image doesn't work when i test it inside all my code. I want a border shadow effect all around the image. The code to do so is in my code but as you can see in my web site image there is no shadow.
Here is the image when I test it in jsfiddle.net without an image.
My code:
CSS:
#collage-container {
/*width: 699px;*/
width: 800px;
/*height: 510px;*/
height: 320px;
float: left;
margin-left: 200px;
margin-top: 10px;
background-color: #DADADA;
}
#collage-one{
width: 699px;
height: 300px;
margin-left: 50px;
margin-top: 10px;
box-shadow: 0 0 20px black;
}
HTML:
<div id = "collage-container">
<img src = "longblue.jpg" id = "collage-one"/>
</div>
Update: here is all my css
<head>
<style type = "text/css">
/* Formating for body of Web Site */
* {margin: 0; padding: 0;}
body {
font-family: times new roman;
background-color: #ebebeb;
}
/* Fixed screen size so objects don't shift */
#screen {
/*
min-width: 768px;
min-height: 100% !important;
margin-bottom: 30px;
*/
/* This locks everything in place*/
top:0px;
margin: 0 auto;
width:1500px;
height: 100%;
padding-top:0;
padding-bottom: 30px;
margin-bottom: 150px;
postion: absolute;
margin-left: 70px;
}
/* Format for black strip header */
#header {
background-color: black;
height: 168px;
width: 100%;
position: relative;
}
/* Class1: Holds the navigation buttons in header */
.container {
width: 960px;
height: auto;
margin: 0 auto;
margin-left: 0;
}
/* Class2: Holds the small containers for short articles */
.containerShort {
width: 480px;
height: auto;
margin: 0 auto;
}
/* Sub Classes: For Class2 */
.short1 {
right: 30px;
}
.short2 {
right: 30px;
}
/* Format for Tree logo in header */
#logoArea {
width: 300px;
height: 168px;
background-image: url(treesmall.jpg);
float: left;
margin-left: 30px;
}
/* Formating for location of navagation buttons */
#navArea
{
height: 100%;
float: right;
margin-right: 0px;
margin-top: 80px;
margin-left: 100px;
}
/* Removes the bullets for navagation buttons in header */
#nav
{
list-style: none;
}
/* Navagation formating */
#nav a
{
color: white;
text-decoration: none; /*removes underline*/
}
/* Formats the links of navagation buttons */
#nav li
{
float: left;
margin-left: 60px;
background-color: #252525;
padding: 8px;
bording: 1px solid silver;
border-radius: 5px;
}
/* Makes a hovering effect where when the mouse hovers over the
links they change color */
#nav li:hover
{
background-color: gray;
}
/* Sub class formating for container class */
.page
{
background-color: white;
padding: 10px;
margin-top: 10px;
width: 1100px;
float: right;
border-radius: 5px;
padding-bottom: 1px;
}
/* Side quote article main page */
.article
{
background-color: #ebebeb;
padding-top: 1px;
margin-top: 20px;
width: 120px;
float: right;
border-radius: 20px;
height: 300px;
border: 1px solid black;
margin-right: 20px;
text-align: left;
}
/* Formating for left sidebar of information */
#sidebar {
background-color: #B4B4B4;
height: auto;
width:350px;
float:left;
margin-top: 10px;
border-radius: 5px;
padding: 10px;
color: #483D8B;
}
/* footer formating */
#footer {
background-color: black;
height: 40px;
width: 1500px;
color: white;
padding-top: 10px;
position: relative center;
bottom: 0;
text-align: center;
margin-left:70px;
}
/* Formating of Header quote */
#quote {
color: white;
float: right;
}
/* Paragraph formating */
p {
color: black;
margin-bottom: 20px;
padding: 5px;
padding-left: 40px;
}
p.light {
color: white !important;
margin-bottom: 60px;
padding: 5px;
padding-left: 40px;
}
p .imagespace {
padding-left: 40px;
margin: auto;
}
h3 {
margin-bottom: 60px;
}
h2 {
font-family: "Times New Roman";
font-style: oblique;
}
#collage-container {
/*width: 699px;*/
width: 800px;
/*height: 510px;*/
height: 320px;
float: left;
margin-left: 200px;
margin-top: 10px;
background-color: #DADADA;
}
#collage-one{
width: 699px;
height: 300px;
margin-left: 50px;
margin-top: 10px;
box-shadow: 0 0 20px black;
}
/*#collage-two,#collage-three,
#collage-four{
width: 226px;
height: 200px;
padding: 5px;
background-color: black;
background-position: top center;
float: right;
}*/
/*#space {
width:300px;
height: 508px;
background-color: white;
float: left;
margin-top: 0;
margin-left: 120px;
box-shadow: hshadow, vshadow blur color
box-shadow: 10px 0 20px #B4B4B4;
border-radius: 10px;
}*/
#ego {
box-shadow: 0 0 20px #B4B4B4;
}
#marquee{
color: #483D8B;
margin-top: 10px;
margin-bottom: 0px;
width: 1025px;
float: right;
}
</style>
</head>
From advice in comments, looks like I have to fix my shadow to accept more browser versions.
Thanks everyone I will play with it.
Main help: #Phillips126
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.