Im making a website http://nebkat.com/beta/index.php and there is a grey background and a white background for content(see for yourself). The problem is that I cant set the white part to be 100% height. It only stays up to the title(Welcome...) and then it stops.
Heights specified in % will not be honored by the browser (edit: I mean to say they wont work the way you expect them to).
You need a clearing div inside your <div id="container"> div. Here is where you should place it:
<div id="container">
<div id="logo">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<!-- HERE -->
<div style="clear: both;"></div>
</div>
set the height of your #container div to be 100% this should fix the problem (at least it will in firefox 3.6).
You should really install a tool like Firebug for firefox, you can use it to 'live' modify css properties on websites. it makes it really easy to figure out issues like this.
give height as 100% for container div and that would solve your problem.
this answer should be updated with this one: Make div 100% height of browser window
body,html{
height:100%;
}
#container{
height:100%
}
Well you will use min-height:100%; or min-height:500px.
That can solve your solution.
The height: 100% in CSS doesnt't work as you'd expect.
My solution would be to write some simple JavaScript which measures the available height, and then sets the div's height appropriately.
It should be pretty straightforward, but if you need any help, I'll put it together for you.:)
Related
I'm working on a project using the framework Twitter Bootstrap 3.
My basic HTML layout is.
Sidebar
Main content
The sidebar element has 100% height and float: left so that the div classed main-content stays inline.
When I give the sidebar float left property and add a row classed div in main-content div.
The height of .row goes crazy. But instead of float: left if I use position: fixed to the sidebar then the .row height gets adjusted according to content inside the .row.
I did play with the web console in Chrome and noticed that there are two pseudo elements created on row :before and :after.
When I unchecked the css property of those pseudo classes the height of the .row is to the height of the child.
Why do I have this issue when I use float: left to the sidebar?
How can I overcome it?
Did google on this, and I found this. But it doesn't help me.
Also I've created a fiddle to demonstrate the strange behaviour of the .row classed div where it extends to almost to screen of the height but there's nothing present inside the .row element.
Someone help me to get this clarified and fixed.
Thanks in advance.
EDIT : Why the height of the .row div is 100% when I didn't define it's height?
I find your mark-up a bit odd considering you are working with Bootstrap. Why don't you make use of the Bootstrap functionality to create your sidebar and main content div? This way you also don't run into unwanted "100% height divs".
Have a look: http://jsfiddle.net/GeA7N/3/
<div class="page-container">
<div class="row">
<div class="sidebar col-xs-4">
</div>
<div class="main-content col-xs-8">
<div class="well custom-well"></div>
<div style="background: red">Content div that is not 100% height by default</div>
</div>
</div>
</div>
Have you tried using http://www.layoutit.com as a guide for a layout? You don't have to register to use it. Once you get the columns setup correctly you can go in and and set the height of the columns with the style attribute on the div. Hope this helps a little bit
Children inherit attributes from parents, unless otherwise specified.
So let's specify a height for row and it will no longer inherit.
All I am adding is a row height attribute to overwrite both the parent's height attribute.
.row {
background-color:blue;
height:50%;
}
JSFiddle Demo Blue is to show the row div. The grey is just the underlying background of the page.
EDIT : Why the height of the .row div is 100% when I didn't define
it's height?
Reason: The ::before and ::after pseudo-elements of the .row class have the style display:table; thereby causing your first row to fill as much remaining space as it can.
Solution: To avoid overriding the Bootstrap framework, simply encapsulate your .container class with another div which has the style display:flex;
I have a quick question on a site that I'm building. It seems that something is pushing the width beyond the window causing a horizontal scroll, and the footer isn't filling the the full width (with a 100% width set).
Can anyone provide any insight?
URL is http://www.brandography.org/sticknfind
Any help is much appreciated.
Thanks!
Problem is with
<div id="content" class="row">..</div>
In bootstrap "row" class has negative left/right margin. As per bootstrap documentation, rows should be placed inside container for proper padding. When you initialize slider, it will calculate wrong content width because of that. Try this instead
<div id="content" class="container">..</div>
The width of your slider div is more than that of the body.
You can fix this by either:
_ Adding overflow-x: hidden; to your body tag.
_ Putting a wrapper div around your content and add overflow-x: hidden; to that div.
I'm trying to make an our team page using bootstrap but I can't get the footer to act right. At first it was not filling the width of the page, now (I'm not so sure what I did) this problem is solved but it is overlapping onto the content: some thumnails, writing, and a link. The page with the problem is: http://rdtaxsavers.com/new/OurTeam.php
My css file is at rdtaxsavers.com/new/css/bootstrap.css
You'll notice that the rdtaxsavers.com site footer works fine. Thanks in advance!
EDIT: I got it back to where the footer is not overlapping but now the width issue is back. You will see in my css that my modal-footer class has width:100%; at the end of it but this does not fix the issue.
EDIT: This is driving me nuts. When I fix the width problem then it overlaps, when I fix the overlap the width is broken.
I think you are placing the footer inside the Container class, the container class has a width of 1170px. therefore the footer will not be 100% width to the body. move the footer out of container class. or you have to change the width of container class.
this is what you have:
<div class="container">
<div class="row">...</div>
<footer>...</footer>
</div>
try to do this:
<div class="container">
<div class="row">...</div>
</div>
<footer>...</footer>
Try clearing the float:left in the ul.thumbnails element.
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
This code should work (in my opinion) but, I ca't figure out why it won't. Thanks in advance
<body>
<div id="wrap">
<div style="margin:auto;"><img src="logo.png" alt="logo"/></div>
</div>
</body>
</html>
EDIT:
I'm trying to center it. It stays in the upper left hand corner. Adding a height and width of auto to both divs also did not work.
If you want to horizontally center the logo then you have to also specify the width of the containing div. Here is a sample code.
<html>
<body>
<div id="wrap">
<div style="width:100px; margin:0 auto;"><img src="logo.png" alt="logo"/></div>
</div>
</body>
</html?
The inner div must have a set width for the margin auto to work.
you need to check 2 things before you set your division's to center.
Doctype : check whether it is not in quirks mode.
Width of inner div must me less that width of parent div.
do check these things you will get your answer...All the best.
Is the width of the inner div less than the width of the #wrap div?
I imagine that the wrap has a set width, the div holding the image will need a set width as well.
Fiddle so you can see that it does work. (a bit overkill for this question, I know :) )