How to change HTML divs' order with Responsive CSS? - html

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/

Related

Make element fill horizontal line

This is a question similar to many that have been asked before. However, with all the previous questions, the necessary widths are known. For me, the widths are unknown.
If I have two columns (primary, secondary), how would I use css such that as primary expands and contracts, secondary fills the remaining horizontal space. I would like to achieve something like the split pane effect, where the location of the split is dictated by the size of primary.
It is imperative to understand that I do not know how many pixels or how much width primary will take up, primary's size will increase and decrease.
It could be:
|----Primary----|----------------------------Secondary---------------------------|
Or:
|-----Primary------|----------------------------Secondary------------------------|
Or even:
|-------------------------Primary------------------------|-------Secondary-------|
How would I do this using CSS? Is it even possible to make an element provisionally "greedy"?
Hmmm, if you're not adverse to using it, you could apply the display:table-cell CSS property to the columns, then use width:100% on the latter one. The HTML structure would look like this:
<div class="split-pane">
<div>
Left content
</div>
<div>
Right content
</div>
</div>
And the CSS:
.split-pane > div {
display:table-cell;
}
.split-pane > div:first-child {
white-space:nowrap;
}
.split-pane > div:last-child {
width:100%;
}
Here's a JSFiddle demonstration to show you what this achieves. Note how as you add more text in a line on the left, it'll push the boundary to the right as needed. (The white-space:nowrap; is there so that the content on the left doesn't wrap on every single word.) Be advised that this CSS will not be interpreted properly on older versions of IE, if that's of concern.
If this isn't what you were looking for, let me know and I'll be happy to help further!
It is correct you can't do this with pixels, however there are other ways to define width. I think you may want to try using % rather than px in your css.
If the content of the 'sencondary' div doesn't matter, you can make some css like this:
#primary { position: absolute;
z-index: 1; }
#secondary { position: absolute;
width: 100%;
z-index: 0; }
If there is content that needs to be moved dynamically, you can move the secondary div easily with jQuery. Here's a jsfiddle with the code: http://jsfiddle.net/LZJZU/5/

css layout with 3 fixed colums. left and right hidden on low resolution screen

I want to create css layout with 3 fixed columns like you can see on image, but the most important thing that left(1) and right(3) columns must hide on low resolution monitor (or when windows is not full size).
On stackowerflow I found something similar, but the left and right columns is not fixed size. and also text on this example "crash" center design on low resolution window (center column goes down!).
jsfiddle.net/XMg2h/418/
There are certainly other ways to approach this out there, but here's my quick solution, which basically involves juggling some relative and absolute positioning. Here's the styling I used to get (hopefully?) the behaviour you were looking for (HTML remained the same):
.example{
width:300px;
margin:0 auto;
position:relative;
}
.example div{
position:absolute;
width:50px;
top:0;
height:300px;
}
.example div:first-child{
left:-50px;
}
.example div:last-child{
right:-50px;
}
.example div.center{
width:300px;
right:0;
}
The negative right/left of the divs must correspond to the magnitude of each side column's width. Here's a JSFiddle example based on the one you supplied. You'll note that if you resize the window, it will keep the central div, well, centered (up to the point where the window becomes smaller than the central div, after which it is aligned to the left).
I hope this is what you were looking for! If it wasn't, let me know and I'll be happy to try to help you further. Good luck!
You can use media queries:
#media (max-width: 600px) {
.example div:first-child, /* <- and add some classes to your divs */
.example div:last-child{
display: none;
}
}

Centering a fluid absolutely positioned section

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

How to use both fixed and stretchy CSS content

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;
}
​

CSS Error in the navigation menu

I'm creating my portfolio. While doing that I just come across with an error in the top menu. It's aligned to left. I tried my level best to solve that problem. I need that to be central aligned. Can anyone please help me? Url is http://jilsonthomas.com
Also footer is not extending to the stream sides. ( both left and right) please help....
Cheers...
You can center the menu by making the list an inline element with display: inline-block; and by specifying text-align:center; on it's parent div#menu.
#menu{
...
text-align:center;
}
#menu ul{
...
display:inline-block;
margin:0;
padding:0;
}
Another option would be to set a width on the list and keep it a block element and specify margins left/right auto, but that would be kinda hackish.
To solve the footer issue just remove the margin and padding on the body. It's the margin in this case, but it's good to remove them both. I'm not sure, but it may vary from browser to browser.
body{
margin:0;
padding:0;
}
Also you may want to use a CSS reset to avoid all sorts of problems like this one.
Hope this helps you,
Alin