I just encountered with a strange problem.Though i haven't used any media queries on my site,the sidebar of my blog moves down when i resize my window like it's responsive but it's not.It is supposed to stay there as it is .
How do i overcome this problem with css?
My blog link
You need a wrapper with a min-width attribute, since the total width of your site retracts and can no longer support your sidebar beside the content node.
div.wrapper { min-width:XXXpx; }
<div class="wrapper">
<div class="content">
<div class="sidebar">
</div>
The wrappers min-width (or just width) must be wide enough to keep the sidebar and the content side by side. (Content width) + (sidebar width) = wrapper width.
Why don't you use percentage(%),
<div style="width:25%;"></div>
Then it will re-size according to your browser window size.
Related
Please see this fiddle. I have a main content div and a sidebar, which I want affixed to the top of the page as the user scrolls. Everything works fine, except for when viewed in mobile:
Without the affix stuff, the columns behave as Bootstrap columns should and the sidebar falls into place directly below the main div. But with affix, the div simply disappears.
I have sort of fixed this using a media query:
//Override affix on small screens:
#media (max-width: 750px) {
.affix {
position: static;
}
}
This puts the div where it should be on small screens and reverts to the affix layout on Desktops. However, there is a void in the middle where it just disapears. As you drag the window in, around halfway it disapears, then repeareas in the correct position as the window is dragged smaller still. I've tried adjusting the 750px value, but haven't been able to come up with a figure which actually works.
How can I reconcile the grid layout and the affix switch on/off? How do I know where the breakpoint will be - should I avoid using a specific number of PX and take another approach to this issue?
My current Bootstrap layout is (I've added the height:500px so you can see the scroll behaviour in JS Fiddle - it is not present in my actual code):
<div class="container-fluid">
<div class="row" id="content">
<div class="col-md-8" style="height:500px">
Main content
</div>
<div class="col-md-4">
<div class="affix" data-spy="affix" data-offset-top="0">
Side content
</div>
</div>
</div>
</div>
Many thanks
I'm not clear on where you would like the Affix to be on mobile, either to the right of the content or beneath it, but I'll try to help:
In your Fiddle I am not seeing a point where the Affix momentarily disappears, but I do see it react as expected with the grid system classes. Ie: the col-md-* divs expand to 100% width at 992px.
The Media Query breakpoint for col-md-* is 992px. (Unless you have reset it in your copy of Bootstrap.)
If you would like to maintain the same width ratio that you have on desktop, I would suggest swapping out your classes from .col-md-* to .col-xs-*
So .col-md-8 becomes .col-xs-8 and .col-md-4 becomes .col-xs-4 -- but then your main content would be quite narrow on mobile.
Not sure if that's what you are going for?
I have a header and footer, each with dynamic content. This is actually an aspx page with a master page which contains header/footer content which may vary in size. I can not enforce a px height for header or footer as they may have images or just text, etc. I want to make the Google map fill the available page height (and width) between them. I'll give the map canvas a minimum height of say 200px, just in case, but otherwise it should force the footer to bottom of the page without scrolling (unless the screen is short enough for the 200px minimum to require scrolling).
<body>
<div id="wrapper">
<div id="header">Title<br />of<br />variable<br/>height</div>
<div id="body">
<div id="map-canvas"></div>
</div>
<div id="footer">
Footer<br />of<br />variable<br />height
</div>
</div>
Here is a Fiddle showing it very close using flex approach... It seems to work in Chrome/FireFox but this does not work in IE11.
https://jsfiddle.net/randbrown/7dc8u6ja/4/
Is the flex-based approach best for this and if so what am I missing to get it working in IE? Or is there a better way to achieve this?
I finally got it working in IE11. It needed height:100% on the #wrapper div. Now it works on Chrome/Firefox/IE11/Edge.
height: 100%;
Updated fiddle
https://jsfiddle.net/7dc8u6ja/5/
My layout is like this:
<section class="container">
<div class="picture-div">
<figure><img src="blah"></figure>
<figure><img src="blah"></figure>
...
</div>
<div class="text-div">
<p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
<p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
...
</div>
</section>
Both the picture-div and the text-div have dynamic width according to their content. The picture-div has a min width of 500px and the text-div has a min width of 300px.
I want a dynamic effect matching the following rules:
The element following the container should have float both cleared and the content fully below the container element.
If the viewport width is not enough, the horizontal scroll bar should always be placed on the HTML element instead of the container, picture-div, or the text-div element.
If the container width exceeds (picture-div width + 300px), the text-div floats at the right of the picture-div and takes whole left space of the container. (eg. if container width is 2000px and picture-div width is 800px, then picture-div takes 800px and text-div takes 1200px.)
If the container width doesn't exceed (width of picture-div + 300px), the text-div doesn't float and both the picture-div and the text-div take full container space. (eg. if container width 1000px and picture-div width 800px, then both picture-div and text-div take 1000px)
Is there a pure CSS solution for this?
I'm kinda bad with syntax far as what you might be asking for, but thought I'd give it a shot to see if you might be able to follow this after in order to fix your issue.
It sounds like you want a responsive layout that will respond to maximum screen width and do specific things at each max or min width that the window shows. The floats would just be different classes that you could add in, I normally just use class="fl" and include that in my css. Here's a small example of what I have that pretty much does what I think you're asking.
<div id="panel-1-index">
<div class="row">
<div class="large-4 columns">
<img src="your-image.gif"/>
</div>
<div class="large-8 columns">
<p>Your Text Content</p>
</div>
</div>
</div>
Then your css would associate each of the class="large-* columns" as a certain width percentage. For the example above it would be:
.large-4 { position:relative;width:33.333% }
.large-8 { position:relative;width:66.667% }
The row and columns css properties will essentially just provide you with specific padding parameters and 100% width. After that, it would just involve you adding media queries that would give the classes different behaviors depending on screen widths.
The example I gave you is from use with my own site utilizing Zurb Foundation css framework. The first part of your question I couldn't really answer cause I have no idea - but the rest can be accomplished by looking at Foundation framework styles that shoot for responsive design. In my very limited experience, I would also suggest not using pixels for your measurements and instead go with percentages or em measures for better responsive design.
Let me know if I was far off, or just trying to tell you something you already know :)
I am planning a fluid-design based layout with 2 cols as follows;
Below is the HTML code:
<div id="container">
<div class="fl wd5percent"><img src="titleText.jpg" /></div>
<div class="fl wd95percent"></div>
</div>
Here the 1st col contains the image for title text and remaining width is used for other content.
Now my issue is as this is a fluid layout, I cannot use "px" width anywhere... I define img to use max-width:100%, but that kind of creates blank space (or gap) below the titleText image when the 2nd col height is more.
How do I define my CSS such that the page scales well as the browser is resized. By that, I mean whatever be the browser size, the titleText image would be displayed to occupy full height as the content height of 2nd col..
Again, I cannot use px width or height anywehere in my CSS. So I cannot say, width:200px;height:100px
Please see the below fiddle link:
http://jsfiddle.net/thilakar/xKrws/2/
I am building my web application on my laptop but when I navigate the page on my desktop pc the layout of the div are distorted.
I think the solution is giving percentage instead of absolute numbers like 240px to height and width of divs.
What do you think ?
Do you have another recommendations ?
Thanks in advance.
What I've done is :
<div style="height:240px;width:240px"></div>
What I think I have to do is :
<div style="height:100%;width:90%"></div>
When using relative sizing 'px' rather than absolute 'pt', the browser approximates the size which can alter your layout depending on user settings for 'zoom' or text-size' levels, browser version etc.
If you absolutely size the layout div using points (pt), you should not see changes based on browser, screen resolution etc.
Try
<div style="height:240pt;width:240pt"></div>
Great reference on relative vs absolute font management here
What do you mean by "distorted"? Did it get wrapped to the next line? That's the only way I can see there being any distortion.
If you want to keep fixed widths, you simply have to wrap something else around it that will enforce a width. For example, if you wanted 2 divs side-by-side:
<div style="width: 800px">
<div style="width: 300px; float: left;"></div>
<div style="width: 500px; float: left;"></div>
</div>
Since the outer element is 800px, and the inner elements don't exceed that, if the screen is smaller than 800px it will just have a horizontal scroll bar, and your divs should still happily be next to one another. Note that if you have anything like borders or padding set on any of the divs, that will add to the width (and height) of the element, so take that into account.