I have a simple HTML page with 3 "columns" (300px x 100%) that all have a vertical scrollbar. This works fine when having a window of at least 900 pixels in width. However, when I resize the window to be smaller than the columns take, one (or more) of the columns jump down to fit the window vertically. This is not what I want, because it would require the user to scroll all the way down before being able to see the other column.
What I want is pretty simple: a way to force the browser to fit the columns horizontally, even if it doesn't fit. width: 900px; on the body isn't a solution I want to use because the number of columns (and their width) is variable.
In other words: how do I force a browser to put my elements horizontally on a page and stop moving elements?
[edit]
My current code (well, it's not the actual code, but it does show what the problem is):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
body {
overflow-x: scroll;
}
.column {
width: 300px;
height: 100%;
float: left;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</body>
</html>
The three "columns" need to be in a single container with the container's CSS set to 'nowrap'
<div style='white-space: nowrap;'>
<div id='col1'></div>
<div id='col2'></div>
<div id='col3'></div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0px; padding: 0px; }
body, html { height: 100%; }
body {
overflow-x: scroll;
white-space: nowrap; // prevent 'text' from wrapping
}
.column {
display:inline-block; // make them behave like 'text'
width: 300px; height: 100%;
overflow-x: hidden; overflow-y: scroll;
}
</style>
</head>
<body>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</body>
</html>
AFAIK there's no cross browser way to force semantic columns (without JavaScript).
here is the answer I gave to a similar question.
HTML:
<div class="parent">
<div class="child">...</div>
<div class="child">...</div>
<div class="child">...</div>
</div>
CSS
.parent
{
display: table-row;
}
.child
{
display: table-cell;
width: 300px;
}
I believe IE < 9 has issues with this, so you'll need to set the sizing and positioning manually with JS for IE.
Related
I have a similar case in my project:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper {
display: flex;
width: 600px;
height: 300px;
}
.container {
display: flex;
width: 100%;
}
img {
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="image-wrapper">
<img src="https://placehold.co/200x600">
</div>
<h2>text</h2>
</div>
<div>
test
</div>
</div>
</body>
</html>
I have fixed width container (.container) that sets the height of its children to match its own height (due to align-items: stretch; by default). In one of those containers, I have an image (<img>) that I want to be the same height as its parent (.image-wrapper) while maintaining proportions. In the demo, that happens, but the .image-wrapper width is not updated. At least not always...
Sometimes, the image appears like this (incorrect):
...and sometimes, it appears like this (correct):
I think it has to do with the browser not updating the width of .image-wrapper. In the incorrect scenario, it has a width of 200 (the placeholder image's original size), but after the image is resized down to 100x300 (due to its height: 100% and its parent being 300px while having a natural size of 200x600) the parent's width is not updated to reflect that. It should change from 200 to 100, the image's now resized value.
One weird thing is that if the size is incorrect and you add width: 100% to .image-wrapper in the inspector and then remove it, its width is refreshed and is now displayed correctly.
If you download the snippet and open it in your browser, you should see that the image is displayed incorrectly until you open DevTools and disable cache. After that (because the image takes some time to load I guess), the width is set correctly upon refreshing.
This happens on latest Chrome, Firefox and IE11 on Windows 10. Here's a fiddle too.
Why does that happen? How to fix it?
As is, apparently this is a known bug in Chrome, but to my confusion I am also experiencing this in Firefox...
There is 2 solutions to this:
1)
img{
height: 100%;
width: 100px; /* Set a specific width to your image */
}
2) Apparently removing the image-wrapper div also solves this problem immediately.
.wrapper {
display: flex;
flex-flow: row nowrap;
flex-basis: 600px;
height: 600px;
}
.container {
display: flex;
height: 300px;
}
img {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="container">
<img src="https://placehold.co/200x600">
<h2>text</h2>
</div>
<div>
test
</div>
</div>
</body>
</html>
This might happen when you don't specify explicitly the size of the image; notably, this is a known bug in Chrome.
You can either:
Specify that in either the HTML width attribute, or the CSS width property:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper {
display: flex;
width: 600px;
height: 300px;
}
.container {
display: flex;
width: 100%;
}
img {
height: 100%;
width: 100px; /* 1st solution: you should use fixed width when using CSS */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="image-wrapper">
<img src="https://placehold.co/200x600" width="100"> <!-- 2nd solution -->
</div>
<h2>text</h2>
</div>
<div>
test
</div>
</div>
</body>
</html>
Use JavaScript to set the HTML width attribute to the actual image size at runtime:
// Give your image a proper ID
window.addEventListener('load', function () {
var img = document.getElementById('img');
// This sets the image's HTML width element
// Notice the self-assignment
img.width = img.width;
})
.wrapper {
display: flex;
width: 600px;
height: 300px;
}
.container {
display: flex;
width: 100%;
}
img {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="image-wrapper">
<img src="https://placehold.co/200x600" id='img' />
</div>
<h2>text</h2>
</div>
<div>
test
</div>
</div>
</body>
</html>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 4 years ago.
I want to achieve the following behavior like in the image
So, I have a header with an arbitrary height and I want the container to fill the rest of the space. I have the following code:
<body>
<div class="header">
My header<br> Arbitrary height (ex: 123px)
</div>
<div class="container">
Container <br> Height = rest of the viewport
</div>
</body>
Note: I don't want to use .container{ height: calc(100% - 123px) } because the in the future 123px may change, so I don't want to modify in two places.
You can use flexbox for this:
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.header {
height: 123px; /* whatever height you want */
background:green;
}
.container {
flex-grow: 1;
background:beige;
}
<div class="header"></div>
<div class="container"></div>
See following example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html,
body {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
padding:0;
margin:0;
}
.container {
flex: 1;
overflow:auto;
padding:10px;
}
.header {
background-color:green;
}
</style>
</head>
<body>
<div class="header">
<p>My header<br> Arbitrary height (ex: 123px)</p>
<p>My header<br> Arbitrary height (ex: 123px)</p>
</div>
<div class="container">
Container <br> Height = rest of the viewport
</div>
</body>
</html>
I'm trying to center vertically a div inside an inline-block,
I used this inline-block to get automatically size of child in order to center my div.
The problem is my children div are floating... in order to constrain it to the left/right position.
Here is how the HTML look like :
<span class="block_container">
<div class="block_text"> <!-- float:right -->
<h1>TITLE</h1>
<p>lorem ipsum</p>
</div>
<div class="block_image"> <!-- float:left -->
<img src="test.png"></img>
</div>
</span>
However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/
Edit:
Here is what I want :
Here is what I tried :
http://jsfiddle.net/kl94/nH2sd/
To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.
1. Adding a display:table-row; to the parent block.
2. Removing all floats and replacing it with display:table-cell;
This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.
Here is the WORKING DEMO
The HTML:
<span class="block_container">
<div class="block_image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
</div>
<div class="block_text">
<div class="bgColor">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
<div>
</div>
</span>
The CSS:
.block_text {
/*background: red;*/
/*float: right;*/
width: 60%;
display:table-cell;
vertical-align:middle;
}
.block_image {
background: yellow;
/*float: left;*/
width: 40%;
display:table-cell;
}
.block_image img {
width: 100%;
max-width: 300px;
height:auto;
}
.block_container {
background:teal;
/*display:inline-block;*/
display:table-row;
}
.bgColor{background:red;}
Hope this helps.
You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.block_text {
background: red;
display:inline-block;
vertical-align: middle;
}
img {
width: 40%;
max-width: 300px;
vertical-align:middle;
background: yellow;
}
.block_container {
background:teal;
display: inline-block;
}
</style>
</head>
<body>
<div class="block_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
</div>
</div>
</body>
</html>
You can try to add this:
margin-top: 13%; at your .block_text selector in CSS.
I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.
I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.
How about nest them?
you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/
HTML
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
​
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}​
If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
​CSS:
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}​
As others have said, you cannot do this using pure HTML or CSS.
If you wanted to do it with PHP, you could do something like this:
Say that your div has a class called "mydiv."
This class should have
Position:absolute Height:10px Width:10px Border-radius:4px
just like you said. In addition to those, add a 1px top margin.
Your CSS should now look kinda like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make your div repeat, put some code like the following inside your HTML where you want it to go.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code probably isn't perfect but I'm sure you'll be able to work with it.
This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.
You can do this with floats however. Take the following code for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.
The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.
Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.
Before I start, I know there are a lot of questions on here related to this, but I feel like the answers are seriously lacking. They at least aren't making sense to me, or they don't accomplish what I want. If you know of question with a solid solution that this duplicates, I simply missed it; I will delete this one.
If I have the following HTML...
<body>
<div id="header"></div>
<div id="content"></div>
</body>
How, in simple terms, can I make the header take up 50px of the view port's height and make the content portion fill the rest of the view port's height with no scrollbar? Ideally this would work in IE6 and without tables. Thanks!
this seems to work for me:
<html>
<body>
<div style="height:60px; position:fixed; width:100%;"></div>
<div style="height:100%; width:100%;">
<p style="padding-top:60px;">hola</p>
</div>
</body>
</html>
Not sure if this is what you need but it will result in #content taking up all the viewport and #header is contained within that, then any content you wanted to put in #content will appear after header.
<html>
<head>
<title>Test</title>
<style type="text/css">
body,
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#header {
height: 50px;
background: green;
width: 100%;
}
#content {
background: blue;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="header">I am the header</div>
<p>first bit of content</p>
</div>
</body>
</html>
height:auto !important; height:100%; bit is for IE 6, you'd ideally do than in a style sheet directed at IE 6 only using IE condition comments.