I'm trying to create a country list with 3 columns. What I did so far is that:
HTML:
<div class="flagList">
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
...
</div>
CSS:
.flagList {
margin-bottom:20px;
width: 100%;
float: left;
font-family: Calibri, Verdana;
font-size:14px;
line-height:13px;
border:1px solid;
}
.flagColumn {
width: 33%;
float: left;
border:1px solid;
}
I don't want to leave any space between rows such as the space between Comoros and Cote d'lvoire. What I want to do is:
How should I change my code?
This is the downside of floating. When there are different heights, divs will start getting stuck on the edges of the bigger ones. There are 3 ways to fix this:
Use a jQuery plugin that equalizes all heights like what Foundation does.
Give .flagColumn a min-height that is bigger than the biggest one. This will make their heights all equal but might give more space than you'd like.
Switch these from a div grid to a table grid. Tables have their place and this situation might be right for it. Avoid this suggestion if the grid changes widths. Use this if .flagColumn is always 33%.
If it were up to me, I would use the 1st or 2nd option. Table properties can be changed to work with media queries too if that is needed.
You may consider looking into the overflow CSS property if you don't mind the end of the country name being hidden. With this, your CSS would become something like:
.flagColumn {
width: 33%;
float: left;
border:1px solid;
height:1em;
overflow:hidden;
}
This allows you to get rid of the spaces while still having them appear in alphabetical order in your code. I think this will also scale better across screen/window sizes.
There are ways to have the "hidden" content show when the user mouses over the box. Here's one example, but you can find others that might fit your goals better.
box sizing: border-box;
border-sizing: border-box; is your friend. Look at my jsfiddle:
http://jsfiddle.net/wr1zL2ax/3/
Related
I made a small form that has potential to take credit-card details, as part of the Daily UI challenges (#002). I haven't implemented any functionality, just design.
Here is the form I made: http://codepen.io/alanbuchanan/pen/vGZPBp
My questions are regarding the two half-width sections of the form - Expiry Date and CC Number.
Here is the relevant code - this targets the two divs that wrap the two form elements:
div {
display: inline-block;
box-sizing: border-box;
width: 45%;
}
I wrapped these two sections in their own divs so that I could have more control over their positioning. Is it possible to position these at half-width without these wrapper divs?
In the example they are taking up 45% width because at 50%, the second div overflows onto the next line.
I just want to give it 50% and have it take up half the space as it should. Or should it not?
Even at 45% width, you can see there is about 1px difference between the height of these two divs.
After inspecting with Chrome Dev Tools, I can't find the problem behind this.
Any answers to my questions or different approaches to the situation will be very useful.
In most cases a setup as the following code, could be a best practice when aiming for creation of inline-block columns.
.column-container {
font-size:0;
line-height:0;
}
.column-container .column {
display:inline-block;
vertical-align:top;
width:50%;
font-size:16px;
line-height:120%;
}
You might wonder, why does the container have zero font-size and line-height?
This is often used because some HTML code cotains indented code, like so:
<div class="column-container">
<div class="column">text</div>
As of this example, you can see that the container div contains spaces/tabs before the column div is programmed. These spaces/tabs are rendered as characters and so they will obey to whatever the css is telling the characters to do in that container div.
You can use flexbox.
Create a outer div having id as flexdiv which will contain both the div of expiry and CC number.
Then write following code:
#flexdiv
{
display: flex;
justify-content: space-between;
div{
display:inline-block;
box-sizing: border-box;
width:49%;
}
}
Codepen Example
Here is the guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Pen: http://codepen.io/anon/pen/jqwJMg
Comments: just add font-size:0 to the form.
These are the changes I made:
.minicontainer {
width:50%;
}
form {
font-size:0;
}
When you add two element inline(50%-50%) you should make sure that the font-size is zero
I have a bunch of floating dynamic divs with different heights.
Fiddle
I want to float the divs nicely, so in the example 14,15,16 should come before 10, and then 17,18,19 should come after.
Any ideas on how I can achieve this?
Thanks :)
.blankspot div {
float: left;
border-right: solid 1px #fff;
border-bottom: solid 1px #fff;
box-sizing: border-box;
margin: 0;
padding: 0;
background: #fed;
display: inline-block;
vertical-align: top;
height: 50px;
width: 100px;
}
EDIT:
Sorry, can see my description is a bit off.
Here's a pic of what I want to achieve
My own research on this issue, tells me that a solution to the problem would result in third party code or some nasty ninja tricks.
If, like in your picture, you can control the width of the outer div to enclose 7 boxes per row then you can mess about with the margins to get the boxes to flow more neatly.
Updated fiddle: http://jsfiddle.net/g4o8rukz/3/
The reason you need to know the number of boxes per row is because you need to know which box will need shifting in the row below. If box 10 is selected to double in size then it's box 15 in the row below that needs dynamically updating with the class neighbourBelow in order to push its neighbours across in the same row.
You need to apply this +5 offset with JavaScript so you could number your boxes with something like this:
<label data-index="10">
<div>10</div>
</label>
Then it's selectedBox.attr('data-index') + 5 to determine the data-index of the box that needs its margin adjusting. This is jQuery syntax but I'm sure you get the idea.
Make the following change and your highlight box will fit the parent
width: 100px;
height: 50px;
background-color: #f0a;
I am not still clear what you wanted to tell regarding before after. If you want to appear 10 after 15 then move the rearrange just your divs. Something like the jsfiddle here http://jsfiddle.net/johirbuet/g4o8rukz/2/
I am just learning HTML and CSS (JavaScript will be next.) I am developing a website on which I have two boxes (defined as <div>s) side by side. They have different horizontal sizes, but each has "height: 1000px".
The large one sits right of the narrow one, and is defined by
<section style = "width:900px; height: 1000px; margin 10px; padding: 20px; background: #BBD1FF; display: inline-block; vertical-align:top;">
I added text within the confines of both boxes, and everything was fine. Then I added more text in the rightmost box, and the box seems to have expanded it's vertical dimension. The original and the new text in the box don't come close to filling the box, so what is going on here? I can't find any property of <div> which seems to relate to this.
Okay so i've taken a guess to what I think your trying to do. Basically, add max-width to your divs to prevent them from expanding. Here's a JSFiddle with something simple what I think your looking to do.
.div-one--left {
height: 1000px;
max-width: 50%;
min-width: 50%;
background: blue;
float: left;
display: block;
}
Also, when dealing with widths. Its good practise to always use percentages. You can't build responsively if your using pixels as widths (but thats off topic slightly).
http://jsfiddle.net/63617aLj/
If you check the site im currently working on:
http://4rate.org/
I want the squares to be evenly aligned to the users screen width, so everything will look "centered",
with no extra space on either side. I could hardcode the widths to match perfectly with my own screen, but then everyone which dont have my screen, will not have it look perfect.
I discovered that for example if i browse this site on my sony z3 compact, there will be 3 squares per line, and a pretty big "extra space" on the right side of the screen.
Same thing would apply for different screen sizes with different users.
How would you go about solving this?
Try the below
Update the class .ratingdiv by updating float:left with display:inline-block and adding vertical-align:top to get this fixed..
CSS:
.ratingdiv {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
display: inline-block;
height: 280px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
vertical-align: top;
width: 255px;
}
You may want to look into using a Javascript framework to accomplish this, or by using CSS media queries. Even something like Bootstrap can accomplish this quite easily.
My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!
A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)
Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.
This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers
OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/