This question is kind of hard so explain so I've created a jsfiddle:
http://jsfiddle.net/zLjHn/ (or see HTML/CSS below)
Basically I want a square shaped video on the right size of the screen with 100% height and the left column to fill the rest of the available screen space. I've been working on this problem for a few hours so any help would be appreciated!
Edit: Left column will contain a number of paragraphs/images that will be centered in the available space (not just a single paragraph as the example code shows.
CSS:
.profile_page {
width: 100%;
height: 100%;
position: absolute;
}
.left {
float:left;
width: 100%;
position: relative;
}
video {
top: 0;
right: 0;
border: 1px solid red;
float: right;
height: 100%;
position: absolute;
max-width: 80%;
}
HTML:
<div class="profile_page">
<div class="left">
<p>This paragraph's width should adjust according to the videos width.</p>
</div>
<video src="http://stream.flowplayer.org/trains/640x360.mp4" />
</div>
Thanks!
Taboo as this sounds, your answer is a table layout. A two-cell table row exhibits the layout behavior you're looking for without any javascript. If you're concerned about semantic HTML (and you should be) you can accomplish this using display:table-cell; and display:table-row; in your css.
This will limit the browsers that correctly display your layout.
<div class="profile_page">
<div class="left">
<p>This paragraph's width should adjust according to the videos width.</p>
</div>
<div class="right">
<video src="http://stream.flowplayer.org/trains/640x360.mp4" />
</div>
</div>
and the style...
.profile_page {
width: 100%;
height: 100%;
position: absolute;
display:table-row;
}
.left {
min-width: 100px;
display:table-cell;
border:1px solid green;
vertical-align:top;
}
.right
{
display:table-cell;
border:1px solid blue;
max-width:80%;
min-width:300px;
}
video {
top: 0;
right: 0;
height: 100%;
width: 100%;
}
See the fiddle: http://jsfiddle.net/NkeLc/1/
If you're looking for a quick fix, you can reorganize to wrap the <p> around the video like this: http://jsfiddle.net/zLjHn/4/
I believe the paragraph and video are competing for "flexibility". Seems like you want the video to flex according to height, and the paragraph to then flex with available width.
I think you can achieve the right flex-priority by leading with the video and wrapping the paragraph around it as the attached fiddle shows.
Try to modify your CSS as following:
.left {
float:left;
max-width:20%;
position: relative;
min-width: 100px;
}
demo: http://jsfiddle.net/4yEmJ/
Related
I was wondering why position: sticky works for some x-axis-scrolling, but once you scroll past the initial width of the screen width, your 'sticky div', stops sticking.
In this example, I have a left-side-bar that sticks to the left (please note that I cannot use position: fixed or position: absolute, because in my actual project both the left-div and the right-div need to scroll up and down along the y-axis, hence we only want left-side-sticking)
is there an additional CSS parameter I can define, such as
left-sticky-distance=999999%
or something like that?
some test code illustrating is below
<html>
<body>
<div style='
position:sticky;
z-index:1;
left:0;
width:100px;
height:200px;
overflow: hidden;
background-color:#ff0000;
opacity:0.8;'
>
</div>
<div style='position: absolute; top: 10; left: 10; width: 200; height:50px; background-color: blue'>B</div>
<div style='position: absolute; top: 10; left: 110; width: 200; height:50px; background-color: blue'>C</div>
<div style='position: absolute; top: 10; left: 210; width: 200; height:50px; background-color: blue'>D</div>
</body>
<html>
After I add the height: auto; into body's CSS attributes as below, this auto-hiding problem is fixed.
body {
background: #fff;
color: #444;
font-family: "Open Sans", sans-serif;
height: auto;
}
Hope it will be helpful to you. :)
This question: https://stackoverflow.com/a/45530506 answers the problem.
Once the "sticky div" reaches the edge of the screen, it is at the end of the viewport of the parent element. This causes the sticky element to stop and stay at the end of parent's viewport. This code pen provides an example: https://codepen.io/anon/pen/JOOBxg
#parent{
width: 1000px;
height: 1000px;
background-color: red;
}
#child{
width: 200px;
height: 200px;
background-color: blue;
position: sticky;
top: 0px;
left: 0px;
}
body{
width: 3000px;
height: 3000px;
}
<html>
<div id="parent">
<div id="child">
</div>
</div>
</html>
What i've just realized is that is stops sticking because you haven't captured an overflow. if you've specified an overflow: hidden;, then check that all content within that axis fits perfectly on all screen sizes and if not then make the necessary adjustments to make the content fit. This also happens when you have specified the height of a div and the content overflows past that height in a certain screen sizes.
I hope this helps anyone that made the same mistake i did.
I'm having trouble because I have a div I want to center and what I have
usually been told to do is this:
width: 700px;
margin-left: auto;
margin-right: auto;
the trouble is, this is for if you want the div to be a fixed width. I want the div
to adjust its size based on the text in the div, and still be centered. I tried:
width: auto;
margin-left: auto;
margin-right: auto;
but this didn't work. It stretches the div to fill up the screen when I do this.
Anyone know what to do here?
for parent block or body - text-align:center;
for centerd block- display:inline-block;
.center {
display: inline-block;
background: red;
}
body {
text-align: center;
}
<div class="center">
<p contenteditable="true"> write text </p>
</div>
DEMO http://jsfiddle.net/RXP4F/
Content Editable MDN
have you tried the approach shown here?
http://www.tightcss.com/centering/center_variable_width.htm
basically.
put your content inside a floated div
put that floated div within another floated div
put left: 50%, position relative on outer div
put left: -50%, position relative on inner div
finally, nest everything in one more div with overflow:hidden
.outermost-div{
background-color: blue;
overflow:hidden;
}
.inner-div{
float:left;
left:50%;
background-color: yellow;
position: relative;
}
.centerthisdiv {
position:relative;
left: -50%;
background-color: green;
float:right;
width:auto;
}
here is my jsfiddle demonstration:
http://jsfiddle.net/wbhyX/1/
Use margin:
0px auto; and display: table;
There are example:
https://jsfiddle.net/da8p4zdr/
You might want to try CSS display:table-cell or display:table
Try this structure.
<div class="container">
<div class="center_div">
</div>
</div>
.container{
float: left;
left: 50%;
position: relative;
}
.center_div{
position: relative;
left: -50%;
float: left;
}
zloctb's answer on Aug 30 '13 at 4:14 actually worked in principle but was incomplete. If you want your element width to be 'auto' based on the contents within it AND centered within its parent BUT with the contents inside the CHILD element left-aligned, do the following (because it really is the simplest way):
.parent {
width: 100%;
text-align: center;
}
.parent div.child {
display: inline-block;
text-align: left;
width: auto;
}
(Obviously, if you just wanted everything strictly centered, you would not need the code for the child element.)
EDITED:
use table, it could be easier to style. Then add div into the tr
.outer-container {
position: relative;
left: 50%;
float: left;
clear: both;
margin: 10px 0;
text-align: left;
}
.inner-container {
background: red;
position: relative;
left: -50%;
text-align: left;
}
Centering an element horizontally can get a little weird, as the functionality isn't very intuitive. Really, you need to play games with text-align:center; and margin:auto, and you'll need to know when to use which.
For example, if I want to center the contents of an element (raw-text), including buttons and inputs, I can use text-align:center.
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>
If we add other elements to our container, those elements will have their width forced to 100%. This helps us emulate that it is centered because technically, at 100%, it is centered! Silly, isn't it?
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>
If your width property IS defined though, then you can use the margin: auto style to center it within the parent.
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>
You need to determine which solution is best for you. I wish I could help more, but it is hard to know what solution will best fit your needs when you haven't provided the HTML for you problem!
Either way, I hope this JSFiddle helps clear things up!
I have a div that comprises a graphic background overlaid with text. I want to center this element horizontally and vertically. But I can't get the text to center vertically. So far, I have the following code:
<div id="step">
<div id="background">
<img src="buttonbackground.png" class="stretch" alt="" />
</div>
<div>
<h3>some text</h3>
</div>
</div>
In the CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
z-index: -1;
}
#step {
text-align:center;
color:white;
}
.stretch {
width:200px;
height:40px;
}
Using the table-cell/vertical-align technique I've seen often referenced elsewhere doesn't quite work.
Given that it's an H3 i'm assuming it's a heading so it's probably gonna be one line of text. If that's the case just set the line-heightof the h3to the height of the container.
If instead it's a paragraph you can do this:
#centeredDiv {
position:absolute;
top: 50%;
left: 50%
margin-top:-20px ;(half the height of the container)
margin-left: -100px; (half the width of the container)
}
Don't mix pixels with percentages.
Try:
#step {
text-align: center;
vertical-align: center;
color: white;
height: 40px;
}
EDIT:
Alternatively, you could try explicitly setting the height of #background to 40px instead of 100%. It should achieve the same effect.
Here's my markup:
<div id="container">
<img id="image" src="image.jpg" />
<div id="contents">Contents</div>
</div>
The height of #container equals the height of #image.
All the heights are dynamic (they change on window resize).
The image can not be set via background property.
How can I have Contents over the image and vertically centered in #container?
Is the height of #contents known? In that case this should do it (jsfiddle demo):
#container{
position:relative;
/* For demo only */
height:500px;
border: 5px solid red;
}
#image{
position:absolute;
/* For demo only */
height:500px;
}
#contents{
position: absolute;
top:50%;
height:100px;
margin-top: -50px; /* Half of #contents height */
/* For demo only */
background-color: blue;
}
This ought to do what you are looking for. I have just set the height of the container and image in css, but if they are the same set in html or using javascript, the result should be the same. The background colour is just there for clarity.
#container {
background-color: #333;
height: 200px;
}
#image{
height: 200px;
float: left;
}
#contents{
line-height: 200px;
float: left;
position: fixed;
}
EDIT: Here is a fiddle of a solution using the old classic margin auto trick. The only thing that may cause problems here is that the parent needs to be position: fixed; which may cause issues for you elsewhere. The main thing is it works, and no heights are set using pixels.
link
Here is the code from the fiddle for a pure css solution with no fixed heights.
<div id="container">
<img id="image" src="https://www.google.co.uk/logos/2012/juan_gris-2012-hp.jpg" />
<div id="contents">Contents</div>
</div>
#container {
position: fixed;
}
#contents{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 10%;
margin: auto;
}
If you know the height of #contents you can set up
#container{position:relative;}
#contents{
position:absolute;
top:50%; /*50% of parent*/
margin-top:/*negative one-half of container height i.e. if contaner is 4 em -2em*
}
You say you don't know the height of #contents, though.
Another option is to set the display: to table-cell and use vertical-align: middle
#container{
display: table-cell;
vertical-align: middle;
}
But depending on what browsers you are targetting for support, that may cause display issues as well.
The more sure fire way is to combine the first option with some jquery or javascript to find the element's height and set its margin-top:
content= document.getElementById('content')
content.style.marginTop = '-' + content.offsetHeight + 'px';
http://jsfiddle.net/h76sy/
EDIT: Sorry, had a bug in my javascript, try it now
I have a quick question about to how setup my basic fluid layout. I have one 40px high, and 100% wide header bar at the top, this looks great.
Then i have a #left and #right div, each floated respectively. This looks cool. They both have height 100% which works great but the issue is the page then scrolls 40px down, because there is the 40px from the header bar... if i use a fluid layout for the header and then the content box's it would look awful on a tiny or very large resolution.
Any ideas?
Here is my CSS
body
{
background: #ebebeb;
margin: 0;
padding: 0;
min-width: 750px;
max-width: 1500px;
}
#wrap
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#header
{
background: #414141;
height: 40px;
width: 100%;
}
#sidebar
{
width: 30%;
background: #ebebeb;
height: 100%;
float: left;
}
#rightcontent
{
width: 70%;
background: #fff;
height: 100%;
float: right;
}
#footer
{
width: 100%;
background: #414141;
height: 40px;
clear: both;
}
And here is my html page:
<body>
<div id="wrap">
<div id="header">
head
</div>
<div id="sidebar">
side
</div>
<div id="rightcontent">
right
</div>
<div id="footer">
footer
</div>
</div>
</body>
Does that help :)
height: 100%; is a tricky thing for web pages, as you are no doubt keenly aware. Looking at your code in Firefox 3.5.7 the #sidebar and #rightcontent columns only have only the height of about an em — just enough to hold the text you put in them, not the full page length I think you were hoping for. The columns are trying to calculate percent height from the explicit height of their parent, but #wrap also has a %-based height, which causes this to fail (at least in my Firefox).
Now, as you've described it (the columns being the right height, except for an extra 40px scroll) what seems to be happening is that whatever browser you're using is passing the full height of #wrap as 100% of it's parent, which is <body>. So naturally, when your columns are sized to the height of <body>, which also encloses the height of your header and footer, the columns are too tall.
A trick I've used a couple of times to achieve the full page length appearance of columns that scales appropriately to whatever page dimension is to stick a position: fixed; bottom: 0px; <div> tag at the bottom of my page with just enough markup inside it to mimic the structure and relevant CSS of the columns.
Here's what I did to your page to get this effect:
<!--Add this to your HTML-->
<div id='columnfooter'>
<div id='sidecont'></div>
<div id='rightcont'></div>
</div>
/* And modify your CSS like this */
#sidebar, div#sidecont {
width: 30%;
background: #ebebeb;
float: left;
}
#rightcontent, div#rightcont {
width: 70%;
background: #fff;
float: right;
}
div#rightcont, div#sidecont {
height:100%;
}
#footer {
width: 100%;
background: #414141;
height: 40px;
position: relative;
bottom: 0px;
}
div#columnfooter {
position: fixed;
z-index: -25;
bottom: 40px;
height: 100%;
background: #ebebeb;
width: 100%;
}
Yes, using the HTML to form empty background columns this way does kind of mix semantic and stylistic markup — a technical no-no. But the CSS is clearly abstracted from the HTML, and with this code I have full page columns, #footer at the bottom (even when more than a page of content is added to either column above it), and it behaves the same in the latest versions of Firefox, Safari, Opera, Chrome and IE8 at any resolution (tested down to 800x600).
Hope this helps!