I'm trying to use both fixed-width and stretchy CSS content, similar to what is seen on Google Calendar. I assumed this would be easily achievable using min-width and max-width, however I am having trouble with sub-elements which are simply sticking to their minimum widths rather than stretching to the maximum.
A demo can be seen here.
You actually don't need setting min/max width anyway.
http://jsfiddle.net/UyZ6T/1/
The problem was basically the float: left; on the stretch-1. You only need that on the fixed size part. It basically means: 'I am on the left now, and everything else takes the space to the right'. A div with float property tries to take as little space as possible, so that the rest can stretch.
remove float:left from #stretch-1. fiddle
Your're essentially trying to create a fluid layout that contains fixed width elements, you need to set percentage widths on all of parent elements in order toget this to work like google calendar - change your css to the following
#container {
max-width:1280px;
min-width:260px;
width:90%;
height:200px;
margin:auto;
background:#000;
}
#fixed-1 {
width:200px;
height:200px;
float:left;
background:#3fb44a;
}
#stretch-1 {
min-width:60px;
width:20%;
height:200px;
float:left;
background:#c44d58;
}
#sub-content {
width:100%;
height:20px;
background:#4788ef;
}
Related
I'm trying to make a responsive version of the "Holy Grail" CSS layout by Matthew James Taylor
So that the Mobile page should render like this:
left
content
right
I tried changing the float rules as in this fiddle, but I couldn't make it work. Try to change viewport size around 600 px.
Is there a way to do this without JavaScript ?
Thanks for any help !
You could make the divs relative and change the margin-top so that it's in the right order.
This is pretty hackish, but it at least gets them in the right order. It only really works if you know what height column 1 will be.
.holygrail .col1
{
margin:0;
position:static;
width:100%;
margin-top: 3ex;
}
.holygrail .col3
{
left:0;
width:100%;
margin:0;
float:none;
}
.holygrail .col2
{
width:100%;
top:0;
margin:0;
right:0;
position:absolute;
}
(This goes inside the media query.)
I looked into this some more, and found another Stack Overflow question where the answers have some good discussion about what you're trying to do. (Basically, this isn't something that CSS can do reliably.) The answers also include some hacks that are better than the one I proposed earlier.
You can use direction to achieve this
The direction property in CSS sets the direction of of content flow
within a block-level element. This applies to text, inline, and
inline-block elements. It also sets the default alignment of text and
the direction that table cells flow within a table row.
CSS:
.main-content {
direction: rtl; /* Right to Left */
}
The valid values are:
ltr - Left to Right, the default rtl - Right to Left inherit -
inherits its value from the parent element
source: http://css-tricks.com/almanac/properties/d/direction/
I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.
After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.
So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen
I have 3divs left, center, right
The problem is that left need to be 320px, right 150px and center will take the rest of the space.
How can i do this? It need to be 100% response. I dont know how big the screen is, it can vary from 1920 to 1600screen resolution, but left and right need to be fixed.
The examples that has been posted in the comments works, but if you want to make 2 column if the width is max 768 and hide the 3d div with display: none; it will not work with the table example. And the other one with css3 box doesnt either work because it doesnt work in Explorer, there is no pollyfill.
So is there any fix for this or do i need to do it the classic way and compensate with margins and padding etc.......
You can display:table property for this. write like this.
.parent{
display:table;
width:100%;
}
.parent > div{
display:table-cell;
min-height:200px;
}
.left{
width:320px;
background:green;
}
.center{
background:red;
}
.right{
width:150px;
background:yellow;
}
Check this http://jsfiddle.net/BNQfC/1/
OR
You can use CSS3 flex-box property.
Check this http://jsfiddle.net/sjYNy/1/
I have DIVs which comes side by side of each other & but there only fourth DIV comes in the first row & other are shifted too the next row.
I want each row first div take no space from left side but is not happened. Here is my code
http://jsfiddle.net/25pwG/
I know i can do it with giving class manual to the new row DIV but i didn't want that. i want this with less css & i didn't want to change my markup
NOTE: i want capability till IE8.
Thanks in advance :)
UPDATED:
http://jsfiddle.net/25pwG/8/
First the .parent div is a common class which is used in other section also & second thing according to the design the parent DIVs touch the row last div so, there is no space from the right side.
Suggestion A:
Add margin-left:-16px to parent
Demo: http://jsfiddle.net/25pwG/1/
Suggestion B:
Use margin-right: 16px on the inner divs, instead of margin-left
Demo: http://jsfiddle.net/25pwG/4/
Suggestion C:
If the parent div width is fixed, you can remove margin on every 4th child like this:
.feature:nth-child(4n){
margin-right:0px;
}
Demo: http://jsfiddle.net/25pwG/15/
Suggestion d:
Wrap your inner divs in a wrapper, and set this to be wider that the parent div
Demo: http://jsfiddle.net/25pwG/17/
Avoid using negative margin and padding. In feature class use margin-right:16px and remove .feature + .feature class.
so your css will be
.parent{
width:480px;
}
.feature{
width:100px;
height:100px;
background:red;
display:inline-block;
margin-bottom:10px;
margin-right:16px;
}
See this http://jsfiddle.net/25pwG/7/
.parent{
width:480px;
text-align: center;
}
.feature{
width:100px;
height:100px;
background:red;
display:inline-block;
margin:0 6px 10px;
}
I suggest trying this one. Using a negative value might cause some problems later on. So as much as possible avoid using it.
It's quite simple, just change from
.feature + .feature { margin-left:16px; } /*Remove this*/
to
.feature { margin-right:16px; }