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.
Related
I know there are numerous threads on this subject but I couldn't get any of the suggestions I found to work for me. Whether that's due to novice status or because the code wasn't suitable, I don't know. But I'm now pulling my hair our after trying to get the grey background behind the h2 tag "Attachments" and the two lines that follow it to expand to full width, removing the white spaces that are currently to the left and right of this div.
http://bit.ly/1OVprsc
One approach is to use negative margins and padding to extend the background in both directions.
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
Your grey div is inside g-container div which have width that is not full one. So if you want to have that grey div full width u must change your structure into something like this:
<div class="g-container">
CONTENT
</div>
<div class="grey-div"></div>
<div class="g-container">
CONTENT
</div>
Or you can do it with position absolute but then none of the parent of the grey div shouldn`t be position relative so the grey div can be absolute relative to body.
I have a div that is fixed to the top of the screen. In the div there is a search area where you make ajax calls and fetch data into the div, and that changes the div height.
Also there is another div called "ThingsToAlign". I want to align this to the bottom of the fixed-top div.
Any one knows how to do this? I tried vertical-align or float: top but none of them are working.. Thanks.
<div className="container-fluid">
<div className="navbar-fixed-top">
<SearchArea />
</div>
<div>
<ThingsToAlign/>
</div>
</div>
In bootstrap the class navbar-fixed-top has the following properties.
.navbar-fixed-top {
position: fixed;
top: 0;
}
p.s: I was coding in react.js so that's why you see "className" instead of "class"
First, your HTML attribute className is incorrect (in standard HTML). It should be class.
Second, you should try to stay away from using angle brackets to surround demo text. The browser will consider it a tag and ignore it (i.e., it will be invisible when rendered).
Your question is not entirely clear to me, but from what I understand this demo may be helpful: http://jsfiddle.net/kdbsm3hz/
Otherwise, you may find a solution in other similar questions:
How do I use CSS to position a fixed variable height header and a scrollable content box?
Position DIV below fixed div with variable height
Placing a scrollable div below a fixed div of variable height
Scrollable div beneath a variable height header
Creating a variable height "fixed" header in CSS with scrollable content
I have an issue I can't figure out: the page in question is http://ndsmcobserver.com.
I have this in the sidebar:
<div class="photostream" style="max-height:150px">
<h2 class="topic"><span class="title">Photostream</span></h2>
// Flickr code here
</div> <!-- eo.photostream -->
When I set
.photostream { .overlay-x: scroll; }
The entire div, for some reason, moves all the way up the column and gets hidden by the advertisement. How do I get it to stay where it is?
Thanks in advance!
It moves up because your ad is floated left and set as 80% width so it knows that it has some space left to fit beside it. The content inside photostream is positioned absolute so therefore you need to add the css clear: both; to your .photostream so that it has a dimension and acts like a container with things inside it.
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'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.