I have some html...
<html>
<body>
<div id="outfit-wrapper">
<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
content...
</div>
<div id="products-area"> <!-- drag from this area -->
content...
</div> <!-- end products-area -->
</div>
</body>
</html>
Selected relevant parts of css looks like this:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#outfit-wrapper {
position:absolute;
width:98%;
margin-left:1%;
margin-right:1%;
height: auto !important; /* ie6 ignores !important, so this will be overridden below */
min-height: 100%; /* ie6 ignores min-height completely */
height: 100%;
border-left:1px solid #dfdfdf;
border-right:1px solid #dfdfdf;
padding:0;
}
#outfit-area {
position:absolute;
height:100%;
float:left;
width:60%;
overflow: hidden;
border-right:1px solid #dfdfdf;
}
#products-area {
float:right;
width:40%;
}
It works perfectly and outfit-wrapper is 100% of the webbrowsers height. #outfit-area and #products-area fills upp 100% of the #outfit-wrapper div as expected.
Now I want a div with some content at the top of the #outfit-wrapper:
<html>
<body>
<div id="outfit-wrapper">
<div id="header">content</div>
<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
content...
</div>
<div id="products-area"> <!-- drag from this area -->
content...
</div> <!-- end products-area -->
</div>
</body>
</html>
I want the wrapper to have the same height as before, I just want to add the header-div. I need the height of header-div and "#outfit-area and #products-area" to be 100% together. How do I achieve this? Do I have to add a div-element like this?
<html>
<body>
<div id="outfit-wrapper">
<div id="header">content</div>
<div id="content-area">
<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
content...
</div>
<div id="products-area"> <!-- drag from this area -->
content...
</div> <!-- end products-area -->
</div> <!-- end content-area -->
</div>
</body>
</html>
For some strange reason - if I set #products-area to position:absolute, then I can't use draggable functionaliy. Please take that in account if you have a good answer to my question :-)
When you set <div id="outfit-area"> to height:100%, it takes on 100% of the height of the parent element - in this case <div id="outfit-wrapper">.
When you add the header, outfit-area is STILL taking 100% of outfit wrapper which now includes the header. You need to either:
A. Give <div id="header"> a percentage height and then subtract that height from 100% and use this value as the percentage height for <div id="outfit-area">, like this:
#header {
height: 10%;
}
#outfit-area {
height: 90%;
}
Edit: Here's a fiddle demonstrating: http://jsfiddle.net/CVwCr/
-OR-
B. Nest the header inside of <div id="outfit-area"> so that it's height isn't being added to ` like so:
<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
<div id="header">
content
</div>
content...
</div>
Related
*, html, body { padding: 0; margin: 0; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; background: #ffe6eb; color: #4E2B99;}
.container { margin: 0px auto; max-width: 1000px; text-align: center; }
.header img { width: 5em; }
/* item */
.item { max-width: 500px; display: inline-block; }
.item .byf { font-style: italic; }
.item .byf-avatar { max-width: 1em; border-radius: 1em; }
.item .content { margin-top: 10px; min-height: 200px; background-color: white; border-radius: 5px; }
<html>
<head>
<title>Friends of Friends - Peach</title>
</head>
<body>
<div id="container" class="container">
<!-- Begin Header -->
<div id="header" class="header">
<img src="http://peach.cool/images/icon-peach-header-big#2x.png" alt="logo" />
</div>
<!-- End Header-->
<!-- Begin Content -->
<div id="content" class="content">
<div id="items" class="items">
<!-- Begin Item -->
<div id="item-1" class="item">
<span class="byf">Because you follow <img src="https://scontent.fcmh1-1.fna.fbcdn.net/v/t1.0-9/38600406_695730037430614_8379042433521942528_o.jpg?_nc_cat=103&oh=e3b71b3b819c1bd035c98057e5b7a69a&oe=5C4FEC80" alt="avatar-1" class="byf-avatar" /> <strong>Name</strong>... </span>
<div id="content" class="content">
<div class="content-list">
<div class="content-list-item">
<span class="cli-name">Name</span> #<span class="cli-handle"></span>
</div>
</div>
</div>
</div>
<!-- End Item -->
<!-- Begin Item -->
<div id="item-1" class="item">
<span class="byf">Because you follow <img src="image" alt="avatar-1" class="byf-avatar" /> <strong>Name</strong>... </span>
<div id="content" class="content">
<div class="content-list">
<div class="content-list-item">
<span class="cli-name">Name</span> #<span class="cli-handle"></span>
</div>
</div>
</div>
</div>
<!-- End Item -->
</div>
</div>
<!-- End Content -->
</div>
</body>
</html>
https://jsfiddle.net/56jgh7Lx/
I have various items (class="item") that I am trying to create a grid for. Each item should have a maximum width of 500 and the container they are within has a variable width of 1000px. When I use display: inline on the item class, it changes the width of all items to 1000px, obviously not what I'm looking for. If I use display: inline-block, it changes the width to 200-something pixels.
I am a little confused why this is happening, especially since my width is set to a max of 500px. I am new to CSS and would love to learn and understand more.
The problem is with the max-width, not the display. Both inline-block and inline were doing what they were supposed to do. On inline elements, widths applied in CSS don't apply. On inline-block, they do.
However, CSS max-width only takes effect if the content is wider than the max-width. Currently, your content is not more than 500px wide. You need to set a width property for max-width to take effect, like this.
.item{
max-width:500px;
width: 100%;
display:inline-block;
}
display:inline-block; will take height, width and will display next to each other while display:inline doesn't take height and width but will display to each other. for you max-width:500px its working because you're content is just 200px wide, if you widen your contents you will get a scrolling effect or your content will go outside the container if its more than 500px.
In an ideal scenrio, inline container cannot hold block level elements.
In your case class="item" you are trying to have inline which is holding child of class="content" which is block element and as expected you inline container width will be of the block child element.
I'm trying to build a map view in my react app similar to what you'd see on Zillow. Here's a screenshot:
Zillow
Unfortunately, I'm not sure the best way to handle setting the container to 100% of the view between the available realestate.
Here's the markup (including some other components so you can see how it fits)
<Navbar></Navbar>
<SearchByMap>
<!-- just gonna put the basic html of this component here -->
<div class="container">
<div class="map-view">
</div>
<div class="list-view>
</div>
</div>
</SearchByMap>
When I set the container's height to 100% it doesn't do anything. However, given this layout, how can I make sure that it fits nicely and with overflow: hidden so that its similar to how Zillow handles its map view?
Thanks
You can easily do this with flexbox by setting the height of the parent to 100% or 100vh, and applying flex-grow: 1; to the element you want to grow using all available space.
*{margin:0;padding:0;}
body,html {
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
Navbar {
background: #eee;
}
SearchByMap {
flex-grow: 1;
background: #ccc;
}
<Navbar>nav</Navbar>
<SearchByMap>
<!-- just gonna put the basic html of this component here -->
<div class="container">
<div class="map-view">
</div>
<div class="list-view>
</div>
</div>
</SearchByMap>
You can use calc . If your header is 50px in height then set it to calc(100% - 50px)
Here's a snipppet:
.Navbar{
height:50px;
width:100%;
background-color:red;
}
.SearchByMap{
width:100%;
background-color:green;
height:calc(100% - 50px);
}
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
<div class="Navbar"></div>
<div class="SearchByMap">
<!-- just gonna put the basic html of this component here -->
<div class="container">
<div class="map-view">
</div>
<div class="list-view>
</div>
</div>
</div>
I have a live website located here:
my website
The problem is the footer navigation bar does not position all the way at the bottom of the browser as shown here:
There is a bit of blue spacing, which is not what I want to achieve.
I'm using twitter bootstrap, if that helps, but the footer bar div object is called "navbar navbar-default"
If I named the footer div like so:
<div class="navbar navbar-default navbar-fixed">
then, the navbar sticks to the very bottom of the browser window, but it stays fixed, which is not what I want.
Currently, the code is like so:
<div class="navbar navbar-default navbar-fixed">
How can I achieve my goal?
Thanks
EDIT: I apologize guys, my website has the footer fixed, but if the code did not have the footer bar fixed, it will have the spacing. I apologize for the confusion.
I'm not familiar with Twitter Bootstrap, but the spacing is most likely caused by padding or margin somewhere between the body tag, and/or the footer tag and everything inside it. In chrome's code inspector I see calculated margin-bottom of 20px in <div class="navbar...">, and also 60px in <body>.
A quick test is to modify <div class="navbar">:
<footer>
<div class="navbar navbar-default" style="margin: 0;">
See if anything changed. If not:
<body style="margin: 0;">
Tested in Chrome's code inspector and the footer is placed at the bottom without any spacing (and doesn't "stick"), but it's a hack so you should probably find a better way / to follow the bootstrap's logic.
Try this
You can try this
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
This an HTML
Below is the basic structure of the HTML code. You'll notice how the footer sits outside of the wrap .
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
You would place your content elements inside the main . For example, if you were using a 2 column floating layout you might have this;
<div id="wrap">
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
This is the easiest way I've been able to get a header/body/footer to work. Demo
HTML
<div class="wrap">
<div class="header">
</div>
<div class="body">
</div>
</div>
<div class="footer">
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.header {
height: 100px;
background-color: red;
}
.wrap {
height: 100%;
background-color: green;
margin-bottom: -100px; /* Must be negative height of footer */
}
.footer {
height: 100px;
background-color: blue;
}
I was working with sticky footer, but it wasn't working out as it should and was giving something like 200 or 400 px of extension past the viewport.
I thought it would be easier to show what I need rather than explain it, see below:
EDIT: I updated my code to reflect what it looks like with sticky footer.
Sticky Footer jsFiddle
ORIGINAL
And here is my code:
<div id="wrapper">
<header>
Header
</header>
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<footer>
Footer
</footer>
</div>
Also noticed that I have a sidebar in the code but not in the picture provided. I will need a sidebar as well without a background.
You did not follow the tutorial or I'd see an empty div with class push in your wrapper. Also, footer should not be inside your wrapper.
As per the online tutorial...
<body>
<div class="wrapper">
<header>
Header
</header>
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<div class="push"></div>
</div>
<footer>
<p>Copyright (c) 2008</p>
</footer>
</body>
The CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as footer */
}
jsFiddle Demo Page
Please try the above and post your actual CSS.
Try this method to anchor the footer at the bottom.
.footer {
width:100%;
position:fixed;
bottom:0;
height:30px;
}
I have tried to implement css sticky footer on my page but it doesn't seem to be working. the footer is below the content but not sticking to the bottom of the page.
http://www.cssstickyfooter.com/
you can view the site I am trying ti implement it on live at www.anderskitson.ca/mrskitson2012
Here is my html code, with some taking out for simplicity
<div class="container">
<div id="main" class="row">
<div class=" twelve columns ">
<div class="row">
<div class="11 columns offset-by-one">
<img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/>
</div>
</div>
</div>
</div>
<!-- container ends-->
</div>
<div id="footer" ></div>
Here is my css declarations
.container{position:relative; min-height:100%; }
#main{ overflow:auto; padding-bottom: 300px; }
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: relative; margin-top: -300px; clear:both;}
Update the css on line 45 foundation.css
html {
font-size: 62.5%;
height:100%
}
See the screen shot on this link: http://img854.imageshack.us/img854/9064/footerpos.jpg
Try bottom:0;min-width:100%; as part of your CSS
I added postion:fixed;display:block;min-width:100%;bottom:0; and it worked out fine. If you are going to be doing this I would probably also make the top of your footer.gif transparent. Or try a .png file with transparency.
Try this HTML code:
<body>
<div class="container">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
CSS code:
html, body {
height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}