I've been banging my head against a wall trying to figure this out; http://nicklemmon.com/lily
For some reason the height of the .content div won't adjust to fit its contents! I can make the height of .content greater than 100%, but that kind of defeats the purpose of a fluid layout. This is just a random site I was working on to learn more about CSS animations, yet I've run in to this silly barrier on the way.
Help!
overflow:auto should do the trick for you.
.content{
overflow:auto;
}
you have a height of 100vh, remove it and you should be fine.
Update(making left column height equal to right column height)
As it appears, there seems to be no straightforward way to adjust left column to same height as right column using pure CSS, you can do a workaround in a number of different ways, best way I would suggest is to use Javascript/jQuery.
//HTML
<div class="moving-right big-lefty col-md-3">
</div>
<div class="big-righty col-md-9">
</div>
//jQuery to use on document ready.
$(".big-lefty").height($(".big-righty").height());
you might want to try another CSS solution that did not work in your case when I tried it on chrome, using inspector. you might want to play with it.
Have .content as display:table-row and .big-lefty and big-righty as display:table-cell
Related
I have a bootstrap container with a bunch of form data in it. I think the width of the container is 970px regardless of how wide my window is. But when I size my window down to a much smaller size the form data inside gets pushed around and moved. Is there a way to keep the containers data all set a fixed width so the elements inside don't shift around when I resize the window?
I tried settign the min-width but that didn't do anything.
.container {
min-width: 970px !important;
border: 1px solid black;
}
If you're using columns inside the container, don't forget they have a percentage width, so you'll need to fix width those elements.
I can't be for sure without seeing your code, so perhaps post a JSFiddle and I'll edit this with a proper answer.
Why are you using fix min-width? It is the reason form data moved. Try to use col-md-4 or col-xs-5 etc classes or percentage width.
I'm not sure what are you trying to achieve as it seems like you are going against the responsive framework, which makes me wonder why you use bootstrap at the first place?
Besides, I think this meta tag post will help you achieve such a thing by using meta tag
<meta name="viewport" content="width=970">
and you should change .container to .container-fluid.
All information needed is here: http://getbootstrap.com/getting-started/#disable-responsive
And here's an example of how it works: http://getbootstrap.com/examples/non-responsive/
I have this CSS: https://cal-linux.com/styles/tutorial.css
And a sample page that uses it: https://cal-linux.com/tutorials/gswc++.html
When I display this on a smartphone (or when I check it through Google's Mobile friendliness verify service), the layout looks huge (badly cropped, instead of reduced to fit the smartphone's screen.
I only use proportional measures (for example, outsidecontainer's div has width 80%, inside right-most column has min-width 25%). I'm placing Google Ads in there, but it's a "Responsive" add, which is supposed to adapt to the page's available size and layout.
Any tips on this? I figured posting the actual links to the pages might be ideal; but please let me know if a "minimal" instance of code that reproduces the problem would be preferred.
Thanks,
Cal-linux
There are a few things I note here:
You use display:table-row and display:table-cell a bit too much. Those don't respond as well to the resizing especially if you have not specified the width of each item. Instead either use floats with a clear:both on the container's :after pseudo-element or inline-block. Either way you should define percent widths for the containers.
Your css has a lot of white-space:nowrap but doesn't use overflow:auto which forces the element to not resize the content and just stretch its parent container.
Aside from that a few places I see a fixed px width which makes it more difficult to resize. It doesn't seem to be your ads. Although google's script does throw an error about trying to put an ad in an 86px x undefined space. You can set a fixed height or at least a min-height to give the script an idea of how big an ad should be placed there.
The easiest solution is to incorporate bootstrap to do the heavy lifting of setting up a grid for what you want.
You can basically do your two column style like so:
<div class="container-fluid">
<div class="left-col col-md-11">
<!--- ALL YOUR CONTENT HERE //-->
</div>
<div class="right-col col-md-1">
<!---Google Ads go Here //-->
</div>
</div>
If you want to stick with your own style, by using the code inspector in chrome I was able to get to the following result when resized:
I made the tablerow class be a standard display:block
The first column was set to width:75%; display:inline-block;
The second column was set to width:25%; display:inline-block;
The autosize elements changed to display:block;max-width:100%; overflow:auto;width:auto;padding:0
The div.code blocks were changed to display:block;white-space:nowrap;width:auto;
Everything else stays the same pretty much. That should fix it, however you should note that frameworks like bootstrap help out with mobile sites by making the page columns collapse and go one ontop of another for mobile browsers so that they get maximum space.
Sample page
On the sample page I have set div#content {
padding-bottom:20px;
} which works well if 20px is enough to leave the footer beneath the content div. However, if the footer changes size, I'll need to change the amount of padding-bottom aswell. I want a more flexible solution.
Is it possible to fix this without moving the footer outside of the content-div?
Update:
found this page that describes a solution to the problem, but the author also states that:
There is only one limitation
You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly.
If you have a lot of text in your footer then it's also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there's nothing to worry about – just set your footer height to a pixel value and away you go.
Which leads me to believe that maybe what I want to achieve is not possible without JavaScript.
Because the height of the footer is unknown beforehand, you can't set an explicit height (in px or em) in the CSS. You can, however, get the footer height with javascript and set your content padding-bottom to it. One line in jQuery:
$('#content').css('padding-bottom', $('#footer').outerHeight(true) + 'px');
The jsfiddle: http://jsfiddle.net/blineberry/cFSX4/19/
You'll probably want to set the padding-bottom in your CSS to your best guess of the footer height and let the javascript make the minor adjustments as necessary.
Tell me if i got you right check this link out, if not just try to explain in other words whats the problem.
http://jsfiddle.net/2cJsf/19/
*You can use "position: absolute;" but thats your choice, I dont like using its buggy sometimes when the website has lots of divs with positions.
Personally, I put my footers on their own outside of the content div, this gives me a more consistent and flexible approach.
My code may look like this
<div id="content">My content here</div>
<div id="foot">Copyright © 2011 mywebsite.com. All rights reserved.<br />my random resize content here</div>
Then with CSS I may do something like this
body {margin-bottom:10px;}
#content {padding:5px;}
#foot {padding:10px;}
Just as an example but obviously style to suit your page and code.
I hope this helps.
I'm trying to implement equal column heights on my new website. If you look at the following page
http://blackburnseo.com/ensor_install/hedgehog-gutter-brush
The left column doesn't auto stretch.
I've tried a few jquery auto heigh solutions but they seem to break up my layout?
Can anybody recommend a solution?
Thanks,
Dan
Check Roger Johansson's faux columns article at http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/. I have used it several times.
What it does is it backgrounds the container and then the main section has its own background, the sidebar is clean. As the main content grows, so will the sidebar seamlessly.
I use this plugin, I wrote for myself, in every project where I need the heights to be equal. But if you can use CSS-only faux columns technique I would go for it instead. The plugin needs some updates to look more professional :-P
You could try the following:
add an <div class="clear"></div> after you right menu
move your background from your left_menu to your content_wrapper
Take background off #left_menu and put it to #content_wrapper with float: left;
#content_wrapper {
background:url("images/left_menu.png") repeat-y left top;
float:left;
}
See this post:
Fluid Width Equal Height Columns
I am trying to make a horizontal scrolling website and I want the divs to float to the right which I can do. But I don't want to have to define the width of the container because it could be different on different pages.
Any Ideas?
Firstly, its generally inadvisable to have a website that requires scrolling side to side. Its an unusual movement (users dont come across it very much) and users tend not to like doing it.
To actually answer your question, the only method other than setting a fixed width onto your container is a percentage width, that way you can set it to be the same size (proportionally) for every user. Alternatively, if you dont want to put on a fixed width at all, just leave it. The container will automatically expand to size of whatever you fill it with.
Your best bet might be to use a javascript library (such as jquery) to check for the widths of columns you have, and set the container to the sum of the widths of the columns.
make a container that holds your divs.It seems to me that you should float all of those divs left.
<div id="container">
<div class="floater_divs">
</div>
<div class="floater_divs">
</div>
</div>
#container { width:100%; other stuff you want etc...}
.floater_divs { float:left; other stuff you want etc...}
If you want the floater divs to have different rules, then just make new classes or id's.