I am trying to make a UL or DIV's where each list item / child div is full screen (100% width 100% height) and floated left so i can scroll horizontally through them, any idea how I can do this? here is my code but it is not working as I had thought
HTML:
<html>
<body>
<div id="site-holder">
<div class="toronto-full">
TESTING
</div>
<div class="montreal-full">
TESTING
</div>
</div>
</body>
</html>
CSS:
html { width:150%; height:100%; margin:0; padding:0; }
body { width:150%; height:100%; margin:0; padding:0; }
#site-holder { width:100%; height:100%; margin:0; padding:0; float:left; }
.toronto-full {background-color:green; width:50%; height:100%; float:left; }
.montreal-full {background-color:red; width:50%; height:100%; float:left; }
Any Ideas?
FIDDLE
Try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#site-holder {
width:100%;
height:100%;
margin:0;
padding:0;
white-space: nowrap;
font-size: 0;
}
.toronto-full, .montreal-full {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: top; /* this line added in edit */
font-size: initial;
}
.toronto-full {
background: green;
}
.montreal-full {
background: red;
}
EDIT:
Review the code again. I added a line which fixes the problem with vertical mismatch of the divs.
Why do you even want to use float for this?
You could use inline-block display;
.toronto-full {
background-color:green;
width:50%;
height:100%;
display: inline-block;
}
.montreal-full {
background-color:red;
width:50%;
height:100%;
display: inline-block;
}
Example: http://jsfiddle.net/7DxFE/
Related
I am having a logo and search bar on header. Logo is on the left corner. I want the search bar at the center of the header. What ever i try its half hidden in the navigation menu. Here is a rough jsfiddle
#header {
position:relative;
float:left;
clear:both;
width:100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
}
#header img {
position:relative;
left:20px;
top:13px;
border:0;
}
#header-search {
position:relative;
left:220px;
}
Try this
Using float to both #header img & #header-search with additional margin to customise the spacings.
#header {
position:relative;
float:left;
clear:both;
width:100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
}
#header img {
position:relative;
left:20px;
top:13px;
border:0;
float: left;
}
#header-search {
position:relative;
float: left;
margin-left: 40px;
margin-top: 30px;
}
JSFiddle
I recommend you to follow the css float concept for this. I have updated your fiddle based on my understanding. Have a look at it.
FIDDLE: http://jsfiddle.net/kiranvarthi/yaqxpm8e/4/
#header .logo {
float: left;
}
#header-search {
float: left;
margin: 30px;
}
Managing this without magic numbers can be achieved using a combination of floats and inline block
#header {
position:relative;
float:left;
width: 100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
text-align: center;
}
#header a {
float: left;
margin: 13px;
/* doesn't quite calculate (110-85)/2 = 12.5 */
}
#header-search {
display: inline-block;
margin-top: 35px; /* (110-40)/2 = 35px */
height: 30px;
}
<div id="header"> <a href="login.html"><img src="http://lorempixel.com/output/abstract-q-c-200-85-4.jpg"
width="200" height="85" /></a>
<div id="header-search">
<form id="searchForm" action="searchproduct.json">Product Name:
<input type="text" name="productName" value="${product.productName}" id="productName" />
<input type="submit" value="Search" />
</form>
</div>
</div>
Note - this method maintains the centered div responsively until the header is too narrow to support it. then you would need media queries.
JSFiddle Demo
Hi i'm doing the a basic layout and i have a problem with my css.
I have a footer tag set, but it doesnt appear at the bottom it appears a the midway point in the page.
Here is my CSS code
My "footer" doesn't appear at the foot if the page ?
I think it might be the height and width i have set but i'm not sure what to set it as prperly.
Thanks in advance
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Replace the footer with:
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
The tutorial used: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This is my full CSS:
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
And this is how i referenced it from the html:
<footer id ="footer">Some footer text</footer>
I suspect you did not reference it correctly, with the proper id from your div?
I think I see your problem. In the footer css code you have the following:
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Pretty sure the margin-bottom being a negative number is the issue. Change that to 5 or 10 and see if it appears.
i got it thanks for all your help.
i got this from summer codes answer above
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
and i had to change the main section to
#main
{
position:relative;
height:100%;
background:#666;
}
I'm trying to vertically align + symbol in the middle of the boxes div however I can't get it working. What am I doing wrong? I would also like to avoid using tables. Thanks ( I also attached codepen link)
<div class="boxes">
<div class="boxes_box">
</div>
<div class="boxes_plus">+</div>
<div class="boxes_box">
</div>
</div>
CSS
.boxes {
height: 250px;
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
}
.boxes_plus {
display:inline-block;
height:250px;
line-height:250px;
vertical-align:middle;
}
http://codepen.io/anon/pen/aoiGm
use this:
.boxes {
height: 250px;
display:table;/*Add display table*/
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
display:table-cell;/*display table cell here is not necessary*/
}
.boxes_plus {
display:inline-block;
height:250px;
line-height:250px;
vertical-align:middle;
display:table-cell;/*Add display table cell*/
}
fiddle
Alternative you can simple remove line-height:
.boxes_plus {
display:inline-block;
height:250px;
/*line-height:250px;*/
vertical-align:middle;
}
fiddle
<style>
.boxes {
height: 250px;
display:table;
}
.boxes_box {
width: 250px;
height: 250px;
display:table-cell;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}
</style>
For the smallest change from what you have, change .box_plus's vertical-align to top.
http://codepen.io/jwhitfieldseed/pen/FeJco
Explanation: line-height puts the "+" text in the vertical center of .boxes_plus.
The text is already centred vertically in its container, so you now need to make the top of .boxes_plus align with the top of .boxes_box.
Please update your css as follow
.boxes {
height: 250px;
display: table
}
.boxes_box {
width: 250px;
height: 250px;
display:table-cell;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}
http://codepen.io/anon/pen/crBea
Try this:
DEMO
.boxes {
height: 250px;
display:table;
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}
I'm trying to fit a sidebar to the end of the #SUBCONTAINER div. this is the HTML code:
<body>
<div id="container">
<div id="subcontainer">
<div id="sidebar">
<div class="logo">
<img src="pictures/icon.png" alt="LOGO">
</div>
</div>
<div id="pagecontainer">
<div class="page">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
and this is the CSS I'm using right now:
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
position:relative;
width:100%;
}
#subcontainer {
position:relative;
clear:both;
}
#sidebar {
width:20%;
float:left;
background-color:#BD4538;
color:white;
}
.logo {
text-align:center;
left:50%;
right:50%;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
float:right;
background-color:#FFFFFF;
color:black;
}
.page {
padding:1em 1em 1em 1em;
background-color:#FFFFFF;
color:black;
}
#footer {
clear:both;
height:10em;
width:100%;
bottom:0;
background-color:#B82928;
color:white;
}
p {
margin: 0em 0em 0em 0em;
text-align:justify;
text-indent:1em;
}
Unfortunatelly the SIDEBAR DIV does not extend to the end of the parent SUBCONTAINER container, so if I have a longer text in PAGECONTAINER DIV, I will see the white background of the parent BODY under the SIDEBARE DIV.
I thought of a trick: if I change the background of the container PAGECONTAINER to the bgcolor of SIDEBAR I have what I want, but I'm working on a responsive website thus SIDEBAR need to change position and to go to the top of the pabe
So, any suggestion?
I've modified the code little bit. Normally to make a equal height column div display:table display:table-cell property used.
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
width:100%;
}
#subcontainer {
display:table;
}
#sidebar {
width:20%;
background-color:#BD4538;
color:white;
display:table-cell;
}
.logo {
text-align:center;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
display:table-cell;
background-color:#FFFFFF;
color:black;}
Working Demo link.
http://jsbin.com/mopunime/1/edit
Remove the "float" property from both the #sidebar div and the #pagecontainer div, and set them as display: table-cell;
Also, set the #subcontainer to display:table and width:100%;. That will make sidebar and pagecontainer to fill the subcontainer div.
Check it out:
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
position:relative;
width:100%;
}
#subcontainer {
position:relative;
display: table;
clear:both;
width: 100%;
}
#sidebar {
width:20%;
display: table-cell;
background-color:#BD4538;
color:white;
}
.logo {
text-align:center;
left:50%;
right:50%;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
display:table-cell;
background-color:#FFFFFF;
color:black;
}
.page {
padding:1em 1em 1em 1em;
background-color:#FFFFFF;
color:black;
}
#footer {
clear:both;
height:10em;
width:100%;
bottom:0;
background-color:#B82928;
color:white;
}
p {
margin: 0em 0em 0em 0em;
text-align:justify;
text-indent:1em;
}
Here's the fiddle: http://jsfiddle.net/z56S3/
If what you want is that the DIV "Sidebar" fit (width or height) to the div "subcontainer" then do that:
#sidebar {
width:100%;
height: 100%;
float:left;
background-color:#BD4538;
color:white;
}
I am trying to get a Sticky Footer to work, and have currently tried the following css:
#footer {
width:920px;
height:208px;
font-size:10px;
margin-left:auto;
margin-right:auto;
background-image:url(images/grad.png);
background-repeat:repeat-y;
padding:0 20px;
clear:both;
position:relative;
margin-top:-208px;
}
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333333;
background-repeat:repeat-x;
padding: 0;
height: 100%;
}
#wrap {
width:960px;
margin:0 auto;
min-height:100%;
height: 100%;
}
#content {
width:892px;
float:left;
border-left:4px solid white;
border-right:4px solid white;
padding:15px 0px 15px 20px;
background-image:url(images/sidebar_bg.png);
position:relative;
padding-bottom:143px;
}
I have had to reduce the #content padding-bottom, so it would fit. But I am still having issues. Firstly, There is too much space at the bottom of longer pages (see - http://bellbird.redgraphic.co.uk/headteacher/ ) Secondly, on a shorter page the footer doesnt scroll up when the browser window is resized (see - http://bellbird.redgraphic.co.uk/school-council/ )
Sticky footers always seem to be an issue, so I must be missing a trick.
Any help would be greatly appreciated.
Lewis
usefull link here. This one helped me with the same issue.
CSS mark-up:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
HTML mark-up:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
use this css instead of your
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
height:40px; /* Height of the footer */
background:#6cf;
}
html:
<div class="wrap">
<div class="inner-wrap">
...
</div>
</div>
<footer>
...
</footer>
css:
html, body {height:100%;}
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;}
.inner-wrap {padding-bottom:100px;}
footer {height:100px;}