Vertically aligning content to middle when outer containers are height: 100% - html

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. :)

Related

CSS positioning questions - do I use float, position, or display?

I wonder if anyone can help me understand a little more on positioning
I've read a lot of information regarding floats, position types and flex.
I understand the basics of it, but i´m having trouble with the simple things.
Which is the regular way professional front end developers use to positioning elements? Do they use float, position: relative|absolute or do they use flexbox or css grid? Or a combination of all?
Do professional developers use CSS reset everytime they make a new website?
I am making a header(it doesnt have a nav bar..just a logo and a title)
I want the logo to be on the left, and the title on the right.
So if i use inline-block i get this weird result where "World Guitars" is not aligned to the logo, but a little below.
#logo {
height: 60px;
width: 50px;
border: 2px solid #34495e;
margin: 2px;
align-self: center;
}
header p {
font-family: Poppins;
font-size: 2em;
margin-left: 500px;
align-self: center;
}
header p,
img {
display: inline-block;
}
<header>
<img src="images/logoGM.jpg" alt="logo" id="logo">
<p>World Guitars</p>
</header>
If i do it with floats, it gets better, but its still so strange..
header p {
float: right;
width: 900px;
}
header img {
float: left;
}
section nav ul {
clear: both;
}
<header>
<img src="images/logoGM.jpg" alt="logo" id="logo">
<p>World Guitars</p>
</header>
Finally in position:relative, and absolute I'm kind of lost.
Can i use position relative and assign values to my heart's content or is this not recommended?
How do i do it in this case?
Thank you!!
Display vs Position vs Float
In general I would say that the modern way to position elements is to use display properties - typically using display:flex or display:grid on parent elements to position their children, or using display:block, display:inline or display:inline-block on an element to position it self.
Where you would use position:relative and position:absolute is if you need to take an element out of flow. A typical case is if you need some elements to overlap. (ie. if you have three canvases that you are laying on top of each other).
Floats were a standard way of positioning elements (ie getting something to sit on the right of the page) in the old days. But now flex box has come along.
However - where you might want to use floats is if you want text to wrap around the element - like it might in a news paper. This is especially important as now HTML elements don't need to be rectangular. See this example.
CSS Resets
I use them. Why not.
These days, typically you might be using some kind of styling library like Material-UI or Bootstrap anyway, but yeah.
In regards to what you're trying to do.
I would use flexbox here.
You have used 'align-self' here - but align-self only applies to a child of a flex parent.
header {
display: flex;
flex-flow: row nowrap;
/*By default this is row wrap - I like to always be explicit with it*/
align-items: center;
/*center vertically, (because the flex flow is row*/
}
img {
border: solid 2px black;
max-height: 100px;
/*size the image*/
object-fit: scale-down;
/*make the image keep it proportions*/
}
p {
font-weight: bold;
font-size: 2em;
}
<header>
<img src="https://www.designevo.com/res/templates/thumb_small/black-wing-and-brown-guitar.png" alt="logo" id="logo">
<p>World Guitars</p>
</header>
I love answering questions like this! Feel free to add additional question comments. Source: I've been doing front-end web development for about 8 years.
Q1. Which is the regular way professional front end developers use to positioning elements?do they use float, position..relative,absolute..or do they use Flex?(or css grid?)Or a combination of all?
The short answer is a combination of all, but there is more to it than that. I would say most of the time developers will use a CSS framework like Bootstrap, Materialize, or Foundation. These frameworks provide a lot of abstraction over writing everything yourself, such as simply defining rows and columns using classes, and simple classes to define how those columns behave when resizing the screen. CSS Grid has a lot of the same concepts as these frameworks, but I would say it is less accessible if you are just starting out.
When it comes to writing custom CSS for things that are specific to your brand or project, I would say most of your larger scale positioning is done with relative positioning (such as padding, margin, width, etc) or flexbox. It is generally not a good idea to create your overall site structure out of absolute position elements or using floats for a few different reasons, which I can go into if you are interested, but positioning something on a small scale, using absolute positioning is common (For example a floating tooltip or a notification popup).
Q2. Do professional developers use CSS reset everytime they make a new website?
It depends. Many frameworks include CSS resets to ensure your website looks the same across browsers. I would generally say it saves time fixing things like odd button shadows in Firefox or extra input borders appearing in Safari.
In regards to your code question, I think this is a perfect application for flexbox! You said "title on the right" so I am unsure if this is exactly what you are looking for.
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
height: 60px;
width: 50px;
border: 2px solid #34495e;
margin: 2px;
}
.title {
font-family: Poppins;
font-size: 2em;
margin: 0;
}
<header>
<img src="https://placeimg.com/50/60/any" alt="logo" class="logo">
<p class="title">World Guitars</p>
</header>
This depends on your needs and intent. In terms of units, CSS has units that have an absolute size (think centimeters, etc.), and units that are scaled relative to the font size, or relative to the size of the viewport you're working inside. There's no right or wrong unit to use, it depends on what you need. Details on units are here: https://www.w3schools.com/cssref/css_units.asp
In terms of whether to use flexbox or not, it can be a very useful tool if you want elements on the page to be able to scale dynamically, depending on the device or window size they're being displayed in. You can also use it to create responsive pages without javascript, with a combination of flex-wrap and setting minimum widths for elements. But not all designs benefit from flex, and sometimes you need elements that don't shrink or grow depending on the device they're being displayed on. Grid is older than flex, but still useful. It's very commonly used with bootstrap.
In terms of your specific example, I suspect the issue you're seeing is because your text is inside of a <p> block, which puts it on a new line. Try putting it inside of a <span> block instead, and give that block an id so that you can set attributes for that ID in your css if you need to.

Continue div element past horizontal overflow

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.

The expanding <div> conundrum

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/

How to achieve vertical centering with optional extra element and adjacent matching column, in pure CSS, no tables?

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.

DIV alignment problem

This is the website I'm having problems with: http://bgflirt.com
I need the menu on the left to have a fixed width and the part with the user pictures should resize when the browser window is resized (width in percent). However, as you can see - the part where the content is refuses to align on the right of the menu, but is instead displayed below it. Can someone help me with this ?
For #content_wrap remove width:100% and float:left. This will make box to stretch to fill all available horizontal space.
You'll need to also clear floats in whatever way you prefer. E.g., add overflow: hidden; to #content_wrap.
This works for me in firebug.
BTW, since you use fixed-width graphics for header and footer (frame with those nice rounded corners), you can't really stretch them.
Try using something like this for your CSS:
.container {
position: relative;
}
.sidebar_wrap {
position: absolute;
top: 0;
left: 0;
width: 130px;
}
.content_wrap {
margin-left: 130px;
}
I believe that is much easier to work with than a float.
A couple of things.
First, get rid of the xhtml doctype and instead start using an html 4.01 strict doctype. xhtml, besides being on it's way out, has inconsistent rendering across a lot of browsers.
Second, this is MUCH easier to accomplish with a table. Just set the width of the table to 100% and the width of the first column to 130px. The layout engine will take care of sizing the other side. Incidentally, this will solve some of the other issues you're going to run into such as making both sides have the same height.
your #content_wrap div has a 100% width, like so it's impossible for it to float left when theres a menu with a 130px width...
You should make the menu's width in % if you really want to make the site resizable... something like
#sidebar_wrap{
width: 15%;
float: left;
}
#content_wrap{
width: 85%;
float: left;
}
note that the sum of the width can't be bigger than 100%, and you should take paddings and borders in consideration.