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/
Related
So I am vertically aligning content to middle with ghost element method:
html {height: 100% } body {min-width: 100% }
.block {
text-align: center;
height: 600px;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
It's a straightforward method, I get the content in the middle but I really dont want any fixed heights, I want it to be dynamical. Though I added height: 600px in code sample, because it gets it to seemingly work but not dynamically.
When I add a fixed height I get what is on the left side of the picture but I also want it to be like right side when the viewport height is smaller so it would cut the top and bottom empty spaces, which can't be done with fixed height.
So any other methods or solutions that work good are appreciated!
Also IE8 support would be also nice.
Update: https://jsfiddle.net/duthzvyo/
Make it so when you squish the viewport height that no scrollbar happens the grey box so to speak squishes as well.
If you want to use purely CSS (i.e. not scripting the width dynamically with JavaScript in your current setup) then I'd recommend using the newer flex-box model, which is a lot more powerful.
See some tutorials on flex-box.
Other solutions (potentially advanced because they require JavaScript coding, but easier in concept if you know how to code in JavaScript) include Famo.us and (work in progress) infamous.
Also check out the following, based on Cassowary Constraint Solvers:
https://gridstylesheets.org/
https://github.com/IjzerenHein/autolayout.js
These last two libraries make it really really easy to center elements (among other things) within dynamic layouts, where you define your layout rules in a declarative manner similar to CSS, but they're much better than traditional CSS in my humble opinion.
I'd recommend checking those tools out. :)
I'm trying to build a website with bootstrap and other css resources and I'm trying to fix the following issue in the last 2 days and I think I won't be able to fix it.
I have a row of 50 250x250 cards with a left-margin of 30px. When I'm on the full screen, I get no problems. However, when I change the screen size, a huge gap between the latest card and the screen borders occurs. This continues until the browser can fill the empty space with the following card.
I don't want to have this empty space and want the cards to automatically align themselves to the center.
I've also divided the columns to 10 rows but still, there was no change.
Is there a way to fix this issue? Screenshots are attached for fullscreen and smaller screen.
You can also see it yourself from: http://sagtekin.com/letseat/maintest.php
Thank you very much for your valuable help.
I have to say your code is a bit of a mess, I would encourage you to go back and reference the bootstrap documentation for proper semantic and structural code as you have a bunch of unnecessary stuff happening.
In a nutshell you have to make your containing div has a text-align: center applied. I also gave a margin-right and left of 15px to offset spacing and maintain centering.
Secondly make sure your column classes make sense and fit into each other mathematically! I've wrapped your images in a col-lg-12 and wrap your images in a col-lg-4 so that there will be at least 3 up. Adjust image sizing as you see fit I made smaller images so you could see the responsiveness in the fiddle more.
.container {
text-align: center;
}
#card {
background: #FAFAFA;
width: 150px;
height: 150px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
display: inline-block;
}
#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}
img {
float: left;
}
Here is a Fiddle
https://jsfiddle.net/gward90/oygyj9qd/
You have several times id card, use class.
Don't set the width of the column divs, let bootstrap do it. (Fixed size and responsive design don't mix too well.)
Use the img tag unless you really want the image in the background and then put something over it which dictates the size.
If you do it like that, then the container will behave as you expect it.
A JSFiddle of it: http://jsfiddle.net/24tL8mkq/3/
I want the red highlighting to continue all the way across the box.
Right now, it's set-up such that:
<div style='width: 500px; overflow: auto; border: 1px solid black; padding-top:-5px;'>
<pre id='pre_1'>
<!-- code box -->
</pre>
</div>
with the relevant css (this is the CSS that I want to extend across the entire div, through the overflow) being:
.bad {
background-color: palevioletred;
width: 100%;
}
I get that I can't use width: 100% as that'll only extend to the right most side of the overflow always, but I can't set a static width as I don't know what the size of the box could be.
I'd really prefer to keep this a HTML/CSS solution if possible just to make this as portable as possible.
Interesting problem. The following works for me in the latest Firefox, Chrome and IE11, though I'd consider this somewhat "experimental" - definitely should be further tested if you need to support a broader range of browsers.
http://jsfiddle.net/24tL8mkq/5/
pre {
display: table;
}
pre > div { display: flex; }
I wish I could tell you why this works, but I don't know. I wasn't able to find another combination that works, however. My guess: setting the pre to display: table makes it so the width will go wider than 100% (500px), as tables will do (when their children are wider than the table). Setting flex on the div children is filling the available space since all the children should be equal width.
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/
I've a problem laying out an e-commerce page with very strict layout requirements. We want to show a product image alongside a product description, with some optional extra information about the product below the image. The width is constrained by our overall page layout, while height can be variable. The answer seems to be "you can't do this with pure CSS".
Here's a mock up:
The marked widths are 372+12+178=562 leaving 8px in borders. The image and description areas have 2px borders, making a total of 8px horizontal pixels, and 562+8=570.
I've got the vertical centering of the image mostly sorted, what breaks the design is the optional 'extra info' panel. The site is generated by PHP, which optionally includes the <div> for that extra info if the data is available for the product. I'd be happy to always include the 'extra info' element and style it to be invisible if it's empty, if it helps solve the design problem.
Requirements:
Product image can be any aspect ratio. Some are thin and tall, some wide and short, some square.
Product image should fill its area horizontally and naturally size itself vertically by its aspect ratio.
Product image should be vertically centered in its area (blue). When extra info is not visible, image would be vertically centered alongside the Description area. When extra info is visible, image should be vertically centered in the remaining space.
Extra info can be any amount of text and aligned to bottom of product image area. So, cannot have fixed height.
Product Description can be any amount of text.
The 'image and extra info' column should vertically match the size of the 'description' column and vice versa.
Description and Extra Info boxes employ CSS gradient backgrounds and borders. All these divs must actually size themselves accordingly, I cannot get away with 'faux columns' as described here http://www.alistapart.com/articles/fauxcolumns/.
Do not want to use Javascript to align elements. Yes, I'm sure we're all jQuery masters and it's a wonderful tool, but it shouldn't be required for this layout.
My design so far employs pure CSS and no tables, using the table-cell style to center the image, but there is some fudgery to do with min-height that breaks when different size images are used. A jsfiddle: http://jsfiddle.net/GJVbX/
That fiddle is easily broken by e.g. tripling the Product Description text content, or adding "width: 370px; height: 400px;" to the so it's not a nice height.
An example of my design that works well:
However, it's not hard to find an image size that breaks it:
Note how the tall product image makes the image div extend vertically and the Description column cannot keep up.
I've been on #css IRC channel on Freenode and was told that this is possible using pure CSS, using tables for this layout task is a sign I don't understand CSS layout and should hire a professional, and that to achieve the vertical centering I should use "display: table-cell". However, extremely helpful as they were, the discussion was too complex to continue on IRC. I understand that <table> brings with it all sorts of horrible layout mechanics that is simply broken for accurate page layout, however, I can't think of a better solution, mostly because of my requirement to keep the columns the same height.
Would appreciate constructive criticism, alternative solutions, or even just confirmation of my plight :)
EDIT - here is the HTML and CSS content from the jsfiddle given above, for those who prefer this content contained within the stackoverflow question. This is extracted from the live site, cleaned a little for indentation, with a dummy product image (produced by the thumbnailer script employed in the live site) and dummy text.
HTML:
<div class="productInfo">
<div class="productTopWrapper">
<div class="productImgWrapper"><div class="wraptocenter"><span></span><img src="http://nickfenwick.com/hood.jpg"></div></div><div class="extraInfoWrapper gradientBackground"><div class="extraInfoInner">Extra info goes here.</div>
</div>
<div class="productDescription gradientBackground"><div class="productDescriptionInner">
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Yet the gradient ends too soon because this div doesn't fill its space vertically!
</div>
</div>
</div>
</div>
CSS:
DIV.productInfo {
max-width: 570px;
font-family: Verdana,Geneva,'DejaVu Sans',sans-serif;
font-size: 12px; /* Just for this fiddle */
}
.productInfo .productTopWrapper {
overflow: hidden;
margin-bottom: 12px;
position: relative;
}
.productInfo .productImgWrapper {
width: 372px;
min-height: 353px;
float: left;
border: 2px solid #cbcbcb;
text-align: center;
}
/* BEGIN css wrap from http://www.brunildo.org/test/img_center.html */
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 372px;
height: 309px;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
*:first-child+html {} * html .wraptocenter span {
display: inline-block;
height: 100%;
}
/* END css wrap */
.productInfo .extraInfoWrapper {
position: absolute;
left: 0;
bottom: 0;
width: 376px;
}
.productInfo .extraInfoInner {
padding: 5px;
border: 2px solid #cbcbcb;
text-align: center;
}
.productInfo .gradientBackground {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d1d3', endColorstr='#fefefe'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#d0d1d3), to(#fefefe)); /* for webkit browsers */
background: -moz-linear-gradient(top, #d0d1d3, #fefefe); /* for firefox 3.6+ */
background: -ms-repeating-linear-gradient(top, #d0d1d3, #fefefe);
background: repeating-linear-gradient(top, #d0d1d3, #fefefe);
}.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
}
.productInfo .productDescriptionInner {
padding: 5px;
font-size: 1.2em;
line-height: 1.2em;
}
Unfortunately, which versions of IE you are required to support affects more than just CSS3 eye-candy. display: table-cell, for example, isn't avilable in IE7. And a myriad of other things present in other browsers are missing or buggy in IE7 and IE8. IE9 is a considerable improvement however.
To be honest, even if you were restricting yourself to latest version of all browsers, this layout would still be difficult in pure CSS, whatever people on IRC may claim. When new layout managers such as Flexible Box and Grid Layout are ubiquitously available, it will be easy, but we are a few years off from that, I'm afraid.
Anyway, here is my attempt at your required layout:
http://jsfiddle.net/amtiskaw/tNywn/
It requires IE8 and above, as it uses display: table-cell to vertically centre the product image. It also has a quirk where the content of the extra-info box will never overlap vertically with the content of the product-info box, although their borders will look correct.
The stretched borders and gradients are achieved by using additional elements which are sized to vertically fill the product container element using absolute positioning, then placed behind the content using negative z-indexes.
Personally, I'd me more inclined in this case to use tables or a bit of jQuery to get the sizing right, rather than this kind of CSS hackery. If you use a table, you can give it an attribute role="presentation" to indicate to screen readers and other semantic tools that it is being used for layout purposes, rather than to express tabular data. This pattern was approved by the W3C.
You can do this with a tall height set with a negative margin. (your height minus the minimum height of your div, in this case 353px) The only problem is that the border bottom will disappear into the parent's overflow (which should stay hidden). Not sure how important the border is to you or even if that's what you were looking for, but perhaps it might point you in the right direction?
.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
height: 1000px;
margin-bottom: -647px;
}
I remember having this problem some time ago and ended up resorting to JS to resolve it. Unforunately the constraints you have are making it very difficult to come up with a working example with pure CSS. The problem as I see it is that as soon as the image increases in size the containing div no longer has a specific width or height and with CSS alone you can't make the calculations needed to expand the description div to the correct height. Browsers won't do this automatically if the element that's size changes is not the direct parent, leaving children of the parent at the heights they were pre-height / width change.
Yes tables will solve the problem with a fixed row height but as you say, they come at a price that I try to stick clear of as much as possible.
I'm presuming you've considered using JS / Jquery to solve this problem already.
Jquery example
$(function()
{
var height = $('.productImgWrapper').innerHeight();
$('.productDescription').css('height', height);
});
Note that .innerHeight() includes padding but not the border or margin. To include the border use .outerHeight().
I know it's not ideal but I can't see any other way of solving your problem. Maybe someone with higher CSS powers than I can come up with a solution.