I have a two column layout which has stopped working while tweaking to get rid of the double scroll bars on body. Now I have one scroll bar on wrap which is what I wanted but the contents somehow overlap by the width of the scroll bar.
html, body {
margin:0;
padding:0;
font: 12px Geneva, Verdana, sans-serif;
color: #1e1f21;
vertical-align: top;
height: 100%
}
body {
background: #fff url(../esimages/cubes.png) no-repeat left bottom fixed;
}
#wrap {
background: #f5f5f5;
margin: 0 auto;
width: 960px;
height: 100%;
}
#logo {
height: 75px;
width: 100%;
background: #1e1f21;
padding: 10px 0px 5px 0px;
}
#header {
height: 30px;
width: 100%;
background: #1e1f21;
margin:0px;
padding: 0px;
}
#container {
overflow: hidden;
height: auto;
background: #f5f5f5;
width: 100%;
margin: 0px;
padding: 0px;
text-align: left;
}
#content1 {
min-height: 100%;
background: #f5f5f5;
padding: 20px 20px 20px 40px;
margin: 0
}
#content2 {
float: right;
width: 290px;
min-height: 100%;
background: #f5f5f5;
padding: 20px 0px 20px 10px;
margin: 0
}
#footer {
clear: both;
padding: 10px;
background: #1e1f21;
text-align: center;
line-height: 200%;
font-size: 10px;
}
The two content boxes don't fit in the container side by side as they should. I have tried with different reduced fixed widths for content1 but it makes no difference at all and the column width stays the same no matter what. I am tearing my hair out because it's just not logical!
<body>
<div id="wrap">
<div id="logo"></div>
<div id="header"></div>
<div id="container">
<div id="content2">
<div class="box0">
<ul>
<li></li>
</ul>
</div>
</div>
<div id="content1">
<p></p>
</div>
</div>
<div id="footer" align="center"></div>
You need to put a width and float: left on content1. Also keep in mind that the total width + padding cannot exceed the container's width.
Also, you're missing a semicolon after margin: 0 for content1
Related
I'm trying to get the #footer div to stay at the bottom of the #content div and the #sidebar div, but what once worked elsewhere, doesn't seem to want to work anymore and I'm at a loss.
Works here: http://wiki.tf-575.com/index.php?title=RBL_Store
But not here: http://beta.tf-575.com/index.php?title=RBL_Store
body {
background: #020B12;
font: x-small sans-serif;
color: B3DFFC;
margin: 0;
padding: 0;
text-align: center;
}
#container {
background: #020B12 url(background-tile.png) top left repeat-y;
font: normal;
width: 100%;
margin: 0 auto;
text-align: left;
}
#header {
background: #020B12;
color: B3DFFC;
padding-top: 1px;
padding-bottom: 67px;
}
#sidebar {
background: none;
float: left;
margin-bottom: 84px;
padding: 0 1px;
width: 164px;
top: 80px;
position: absolute;
}
#content {
color: #446C90;
margin-top: -48px;
min-width: 960px;
font-size: 120%;
text-align: left;
padding: 0 20px 0 165px;
}
#footer {
background: url("footer.png") no-repeat scroll left bottom transparent;
clear: both;
color: #446C90;
font-size: 90%;
min-height: 82px;
margin: 0;
padding: 82px 0 0 165px;
text-align: center;
}
<body>
<div id="container">
<div id="header">
<snip />
</div>
<div id="sidebar">
<snip />
</div>
<div id="content">
<snip />
</div>
<div id="footer">
<snip />
</div>
</div>
</body>
Your problem is that on the beta site the sidebar is positioned absolute, so the float is ignored and the clear:both; doesn't push down the footer anymore
try setting the width of the footer to 100%
Just wanna ask for your help regarding my markup, I am trying to do exactly the same like this image:
http://prntscr.com/6wrpr3
Here's my markup:
<div id="two-box">
<div class="wrapper clearfix">
<div class="column blue">
<div id="circle">
<div id="content">
<h2>PARALLAX</h2>
<h1>Text</h1>
<h2>ARE COOL!</h2>
</div>
</div>
</div>
<div class="column red">
<div id="circle-red">
<h2>LET IT</h2>
<h1>Fade</h1>
<h2>RIGHT NOW!</h2>
</div>
</div>
</div>
</div>
<div id="carport">
<div class="wrapper clearfix">
<div id="starynight"></div>
<div id="car"></div>
<div id="road"></div>
</div>
</div>
ANd now for my CSS:
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 1140px;
}
.two-box{
width: 100%;
}
.column{
width: 50%;
position: relative;
padding: 40px 0;
}
.blue{
background-color: #3498db;
float: left;
}
.red{
background-color: #e74c3c;
float: right;
}
#content{
margin-top: 150px;
}
.column h2{
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 3.5em;
font-weight: 300;
line-height: 1em;
text-align: center;
margin: 0;
}
.column h1{
color: #fff;
font-family: 'Pacifico', sans-serif;
font-size: 4.2em;
line-height: 0em;
text-align: center;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
padding: 40px;
margin: 0;
}
#circle{
background-color: #3aa3e9;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#circle-red{
background-color: #f25a4a;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#road{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;
width: 1020px;
height: 145px;
display: block;
}
#car{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;
width: 325px;
height: 125;
display: block;
position: absolute;
z-index: 9999;
}
#starynight{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;
width: 1012px;
height: 768px;
display: block;
}
Here's the Codepen:
Let me know if there are things on my markup and CSS that i need to fix or show me the actual codepen. Thanks!
Note: The main issue here is the positioning of elements. Let's say I want the text and circle to be align together and not have a padding. Similar thing with the background and the car image they wont just align at all.
Something like this?
http://jsfiddle.net/4kk1fyjg/
I basically set the background-position to cover, fixed the car height (missing px at the end) and set the wrapper position to relative so that the car should be absolute positioned according to the container.
let me know if this works as expected.
Not sure about the car position, but you can adjust the position changing the right or left property
EDIT
Here you are:
http://jsfiddle.net/4kk1fyjg/2/
Just wrap the content inside another div, set the circle position to relative, display as table, the new wrapping div as table-row and the #content as table-cell, then make the table cell vertically align in the middle and that should be it.
You miss <div id="content"> in circle-red.
Remove width from #starnight and add background-size: 100% do the same for #road.
To #car change position to relative and add:
float:right;
bottom:100px;
right:150px;
To #content remove margin-top and add padding-top:125px;
And finaly for .column h1 change margin to margin: 0 40px;
hope this work how expected
JSFiddle
I want the div "nav" to be floated right and display its divs inline. Also when I resize the browser I want "nav" to slide under "logo" and do so not having divs left on the same line as the logo while other underneath the logo.
Here is the HTML:
<div id="header-container">
<div id="header-wrap">
<div class="left logo logoimg">
<img src="images/Logo-Robert_Fikes_IV.png"/>
</div>
<div class="right nav">
<div class="bluebutton">PORTFOLIO</div>
<div class="bluebutton">PORTFOLIO</div>
<div class="bluebutton">PORTFOLIO</div>
</div>
</div>
</div>
and CSS:
body {
background: #000000;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
img {
max-width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
#header-container{
margin: auto;
padding: 80px 0px 0px;
max-width: 1160px;
width: 100%;
height: 200px;
}
#header-wrap{
padding: 0px 40px 0px;
max-height: 100%;
}
.logo{
max-width: 440px;
width: 100%;
}
.logoimg{
}
.nav{
margin-top: 20px;
}
.bluebutton{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 8px 8px;
margin: 0px 0px 0px 5px;
}
http://jsfiddle.net/wse63zzk/
Done. I changed the nav divs to li elements, and of course the parent div to a ul. This is really how you should be making navigation menus for semantic HTML.
Then I just added the following CSS:
.nav {
margin-top: 20px;
list-style-type:none;
}
.right.nav li {
float:right;
}
Fiddle
I created a jsfiddle example here
http://jsfiddle.net/Lmazqt4q/5/
But when I try to fix the right column, it doesn't stay a fixed width. I know that with the same code if I put it on the left side and fix that, it'll stay fixed fine. Been awhile since I've played with css so trying to refresh and have gotten frustrated with this. Any help would be appreciated. Thanks!
If you need the code, here it is
HTML:
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
<div id="topBar">
Top bar
</div>
<div id="leftColumn" class="column">
Content
</div>
<div id="rightColumn" class="column">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
CSS:
body {
background: none repeat scroll 0 0 #CCCCCC;
font: 13px/17px Arial,Helvetica,Verdana,sans-serif;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
div#header {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
height: 70px;
margin: 0 auto;
width: 90%;
text-align: center;
}
div#wrapper {
height: 100%;
}
div#content {
background: none repeat scroll 0 0 #B4C4EA;
height: 87%;
margin: 0 auto;
overflow: auto;
position: relative;
width: 90%;
}
div#footer {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
height: 50px;
margin: 0 auto;
padding: 20px 0 0;
position: relative;
width: 90%;
text-align: center;
}
div#topBar {
background: none repeat scroll 0 0 #444;
color: #FFFFFF;
height: 40px;
text-align: center;
width: 100%;
}
.column {
display: inline-block;
float: left;
height: 200px;
}
div#leftColumn {
border-right: 1px solid #000000;
width: 83.88%;
}
div#rightColumn {
border-left: 1px solid #000000;
width: 1.25em;
}
You could float the right column and give the overflow:hidden property to the left. If you have the right column come before the left in your markup, the left column will fill the remaining width.
HTML
<div id="topBar">Top bar</div>
<div id="rightColumn" class="column">Content</div>
<div id="leftColumn" class="column">Content</div>
CSS
.column {
float: right;
}
div#rightColumn {
width:50px;
}
div#leftColumn {
float:none;
overflow:hidden;
}
JSFiddle
Or, display your columns as table cells, this way would require you to have a container for your columns:
HTML
<div class="columns">
<div id="leftColumn" class="column">Content</div>
<div id="rightColumn" class="column">Content</div>
</div>
CSS
.columns {
display:table;
width:100%
}
.column {
display:table-cell;
}
div#rightColumn {
width:50px;
}
JSFiddle
Here is the problem http://jpswebsites.com/rebound/recovery/recovery-education/134-2/
My website content background area stops at 1000px. The min-height property is set to 1000px. Why doesn't it flow to the bottom where it meets the footer like it's suppose to?
The HTML:
<html>
<body>
<div id="swoosh">
<div id="wrapper">
<div id="container">
<div id="int-content">
<div id="main">
CONTENT IS HERE
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS
body{
background: white url(images/tiny_grid.png)repeat;
font: 13px Muli, Arial, Helvetica, sans-serif;
color: #525153;
min-width: 980px;
}
#swoosh {
background: url(images/swoosh.png);
background-repeat: no-repeat;
}
#container {
margin: 10px 16px 0 16px;
background-image: url(images/container_bg.jpg);
min-height: 1000px;
}
#wrapper {
width: 980px;
margin: 0 auto;
background: url(images/cbg.png) no-repeat 0 0;
padding: 0 14px;
}
#int-content {
margin: -5px 2px 15px 30px;
}
#main {
float: left;
width: 484px;
padding: 34px 0 0 20px;
}
I tried putting a height 100% on every item from through as tutorials suggested. This really threw things out of whack.
Thanks in advance all!