How do you code a three-column layout in CSS when the source order jumps around from column to column?
The page has seven sections -- this fiddle shows how the required source order compares to the layout. The number is for its position in the source order and the text is where it should appear on the page.
http://jsfiddle.net/hpr2b/4/
As you can see, there are essentially three columns and three rows, but the elements in the second row shouldn't top-align and the second row shouldn't clear the first row. Each section should be flush with the bottom of the section that is located above it.
Notes:
The source order matches the order that the elements need to appear on mobile devices and unfortunately cannot be changed
I also don't have the option of duplicating sections in the markup and then showing/hiding them based on viewport width
Absolute positioning is unfortunately not an option because the layout must adapt to any viewport width 320px and up
I've tried a number of well-known CSS layout techniques and the above fiddle shows the most successful attempt -- here is the code used for the "top row":
.top-center {
float: left;
width: 55%;
margin-left: 25%;
}
.top-left {
float: left;
width: 25%;
margin-left: -80%;
}
.top-right {
float: right;
width: 20%;
}
Here are the problems I'm encountering:
IE 9/10 is a complete mess (see below)
In Chrome, the "Middle Right" div always clears the "Top Left" div, preventing it from being positioned beneath "Top Right". Also, if the "Top Right" div becomes too tall, it overlaps "Middle Right".
In Firefox, the second "row" top aligns, overlapping the left and right sections of the first row.
Here is what it looks like in IE10:
And here it is in Firefox:
If the positioning is that important and you cannot control the (order of the) HTML code (I assume so from reading your question), I would rather go for having a somewhat usable absolute positioning using CSS, and refine it (onDomReady) using javascript (which gives you a lot more freedom to choose the best algorithm for the layout you need, but still a usable yet not perfect layout for those few anti-javascript-guys out there).
However, it is hard to tell without seeing the actual markup and requirements.
If absolute positioning is absolutely not an option, you'll need to calculate the height of elements prior to the page generating and put each block into the correct column based on heights. Trust me, absolute positioning is much easier!
You'll probably want something like Masonry. It sets up the columns for you as you require. It does rely on absolute positioning, but that's just about your only easy option. You'll need to tinker with the code a little to make it responsive, I did it on an in-development site here but I can't entirely remember what I did, sorry. Feel free to look through the source code though.
Masonry is pretty quick; below is the basic setup, here are more details.
HTML
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
JavaScript
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
I managed to make the following layout with CSS only: http://jsfiddle.net/hpr2b/7/
.top-center {
width: 55%;
float: left;
margin: 10px 0 10px 25%;
}
.top-left {
float: right;
width: 25%;
margin: 10px 75% 40px -100%;
}
.top-right {
float: right;
width: 20%;
margin: 10px 0 40px 0;
}
.mid-center {
margin: 10px 20% 10px 25%;
clear: left;
}
.mid-left {
float: left;
clear: right;
width: 25%;
margin-top: -20px;
}
.mid-right {
float: right;
clear: right;
width: 20%;
margin-top: -20px;
}
.bottom-center {
margin: 0 20% 10px 25%;
}
Related
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
I'm new to design and I need to place the two imgs beside each other, with some space between.
This is what currently my site looks: Dont worry about the cut off, it is suppose to be like that. I need to prepare this to allow me to later on add responsive elements on to it so I cannot use absolute positions or anything that will lock the image into place.
Both Images are the same height at 125 px. When I float both the pictures left or right, the pictures appear 95% cut off at the edges of my webpage. I dont understand why it's being place underneath each other, there seems to be plenty of room for the second image to be on the same level.
Heres what I have so far: "navi" is my container or wrapper... mainlogo and slidertop i used to experiment and currently have no code under each.
<div id="navi">
<div id="mainlogo"><header></header></div>
<div id="slidertop"><header id="topad"></header></div>
<div style="clear:both"></div>
</div>
#navi{
height: 130px;
}
#mainlogo{
}
#slidertop{
}
This is how Im calling my images:
header{
background: url(../Images/logo1.gif) no-repeat 15% 0px;
border: none;
height: 125px;
top:100px;
}
header#topad{
background: url(../Images/TopAd.gif) no-repeat 80% 0px;
border: none;
height: 125px;
vertical-align: middle;
}
In the original code you posted, I think the divs are all 100% of the available width, and they will appear on top of each other on the page. You can see this for yourself if you temporarily add a coloured border around each div so you can see where they are.
If you want them side by side, you have to add styles to accomplish this. For example, you could float them and specify the widths:
header { width: 45%; float: left; }
header#topad { float: right;}
E.g.: http://codepen.io/anon/pen/ynuoa
Have you tried floating the divs?
#mainlogo{
float: left;
}
#slidertop{
float: left;
}
My code is something like the below. When theres 3 images everything is fine once theres 4 it gets full and moves the entire div.top into another row. How do i make the div inside top just start a new row instead?
I tried writing .top width=500px but once it hits or passes it instead the images inside are squeeze together instead of each being 150x150. I tried max-width on top instead and in opera and chrome i see the border of top as 500width but the images continue to render pass it. (i have a firefox problem with my div so the width looks fixed to something else).
So how do i make these divs go into another row? and not try to squeeze together
<div class="top">
<div><a href><img/></a></div>
<div><a href><img/></a></div>
<div><a href><img/></a></div>
</div>
I may need more information here, it's hard tell exactly what's happening. A screen-shot perhaps?
I would probably start with something like this:
.top {
width: 500px;
overflow: hidden;
}
.top div {
display: inline;
float: left;
width: 150px;
height: 150px;
}
Here's a solution that might help (used it in my example, just customized to fit your example)
.top {
display: block;
padding: 0;
margin: 0;
width: 100%;
}
.top div {
float: left;
display: block;
margin-right: 5px;
margin-bottom: 10px;
width: 47%; /* Not needed, but in my case I needed 2 columns */
}
Basicall, the .top div float: left; is what is making my images to go to next row if columns are full.
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Assuming the element which is floated and will be centered is a div with an id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that.
.center {
display: table;
margin: auto;
}
You can use fit-content value for width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Say you have a DIV you want centred horizontally:
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
Proof that it is working!
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
Can't you just use display: inline block and align to center?
Example.
for 50% element
width: 50%;
display: block;
float: right;
margin-right: 25%;