I have setup a site with content region of fixed width and variable height, horizontally and vertically centred, based on the css and html found in this answer.
That works pretty fine in all Browsers I have tested, even in IE (11). However the page needs to work in fullscreen mode, too and if i run it in ie, the content goes to the upper left corner.
here is my html:
div.wrapper-1 {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
div.wrapper-2 {
display: table-cell;
vertical-align: middle;
}
div.wrapper-3 {
margin: 0px auto;
width: u($page-width);
}
<body>
<div class="wrapper-1">
<div class="wrapper-2">
<div class="wrapper-3">
<!-- does all my content go -->
</div>
</div>
</div>
</body>
What can I do to make that work in fullscreen, too?
Thanks for help!
Finally, after digging around I could get it up and running!
I added that to my css:
html {
width: 100%;
height: 100%;
}
On your div.wrapper2 and 3 set a position:relative; This will keep it relative to your div.wrapper1 and should solve that issue. This is also found on the second part of the answer you linked.
Related
Given this simple layout:
HTML
<div class="container">
<div class="imgContainer">
<img src="http://placehold.it/400x400">
</div>
<div>
This should always stay to the right of the image.
</div>
</div>
CSS
.container {
height: 20vh;
}
.imgContainer {
float: left;
height: 100%;
}
img {
height: 100%;
}
Issue #1
Chrome, Firefox, and Opera correctly display it like this:
IE11 incorrectly puts the text 400 pixels to the right, based on the natural width of the image:
Issue #2
As you increase the window's height, the text should stay glued to the right of the image. This works correctly in Firefox.
However, the text overlaps the image in Chrome and Opera:
See the behavior in this Fiddle.
Question: Is there a style I can add that will cause all browsers to behave consistently?
[Note: I discovered this while working on this question. I thought I had a solution, until I realized it wasn't responsive in any browser except Firefox.]
The following might do the trick.
Instead of using float, I would suggest using CSS tables.
Apply display: table to .container and set the height as needed.
For the two child elements, .imgContainer and .panel, use display: table-cell and inherit the height from the parent block.
I think this is pretty close to what you need, should work in all browsers
(but I did not check...)
.container {
height: 20vh;
display: table;
}
.imgContainer, .panel {
display: table-cell;
height: inherit;
vertical-align: top;
}
img {
vertical-align:top;
height: inherit;
}
<div class="container">
<div class="imgContainer">
<img src="http://placehold.it/400x400">
</div>
<div class="panel">
This should always stay to the right of the image.
</div>
</div>
So I'm developping MVC app and am not very experienced in this feature, and I have encountered a problem which bugs me.
My desktop resolution is 1920x1080. When any app is rolling in fullscreen, it displays normally. But if the window is resized (ex: clicking on the button on the upper-right border of the browser), everything gets crunched in the middle.
Or I would like at least that the full dimension width of my browser / app be maintained at all time and that a scrolling bar shows down on the page because I do not have the time / resources to work on a "resize" app or script, if that even exists.
Can anyone help me out? Don't hesitate to add information or ask for more info if you need, I love to learn new stuff.
EDIT
Here are some images took a short while ago. The normal view:
And when the window is resized:
Another image from another app:
And the same image when resized:
Like I said, in those 2 cases I would like everything to remain as they are and the user would have to scroll horizontally. I figure that it would be less "painful" to develop that way than to recalculate / resize everything...
EDIT 2
For those familiar with MVC templates, here's some coding that I have added for one of my app, maybe that will help me understand what's happening.
First the _Layout view:
<div id="body">
<div>
<div id="leftSide">
#{
Html.RenderAction("ShowCardSetLinks", "Home");
}
</div>
<div id="inner">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<div id="rightSide">
#{
Html.RenderAction("GetCardOfTheDay", "Home");
}
</div>
</div>
<div id="dialog-modal" title="See Card Detail"></div>
</div>
Then the CSS I have added:
#body {
width: 1920px;
display: table-cell;
table-layout: fixed;
}
#leftSide {
width: 20%;
display: table-cell;
position: relative;
}
#rightSide {
width: 20%;
display: table-cell;
position: relative;
}
#inner {
width: 70%;
display: table-cell;
position: relative;
}
that's about it for the main layout, if I have anything else, I will post it.
Remove display: table-cell; from all of your CSS. This is not proper structure. Especially remove it from the body tag and the table layout (awful bro). Why do you have a width on the body tag too - and for that large?? This not good coding practice at all...change to this and let me know if it works. Wrap all your main content is a wrapper with the class I specified below.
You also had 70%, 20%, and 20% as widths. That's 110%. Obvs can't exceed 100%. I changed this.
EDIT: I see that you had an ID named BODY and it wasn't the body tag (you should rename this). My mistake. See update below...
#body {
position:relative;
margin:0 auto;
width:100%; // change it to whatever value you want your site, but don't exceed 980px. Just leave it at 100% if you want a fluid site.
overflow: hidden;
clear:both;
}
#leftSide {
width: 20%;
position: relative;
float:left;
}
#rightSide {
width: 20%;
position: relative;
float:left;
}
#inner {
width: 60%;
position: relative;
float:left;
}
I am making a portfolio website at www.magalidb.0fees.net and I am having some issues with correctly displaying my website in several browsers. The issue is that in some browsers, only the bottom half of the content (which is inside a container) is visible, and the top half is somewhere above reach, at the top of the browser window. To see an example, try opening my website in Firefox, Opera or Internet Explorer.
There are some validation errors, but those are not that urgent. None of those errors is related to the behavior of the website. The site is written in HTML5 by the way, and uses both regular CSS and CSS3.
The issue seems to be with the vertical centering. I center the content of the container both horizontically and vertically.
To center the container horizontically, I used the following CSS:
#container {
min-height: 100%; /* To make sure it reaches the bottom of the browser page */
width: 940px;
margin-left: auto; /* Center horizonticallly */
margin-right: auto; /* Center horizontically */
overflow: hidden;
overflow-y: hidden; /* Vertical scrollbar fix for IE */ }
The vertical centering has the following CSS:
#valigner {
width: 720px;
position: absolute;
top: 50%;
bottom: 50%;
height: 500px;
margin-top: -45%;
margin-bottom: -45%;
margin: -40% 0 0 220px; }
The 220px is only so that the content and header won't stick behind the sidebar.
This is a general layout of the code in the body of my index page:
<body>
<div id="container">
<div id="sidebar" class="left">
<?php include('sidebars/sidebar.php'); ?>
</div>
<div id="valigner">
<div id="sidebar-bottom" class="left"></div>
<div id="head" class="right"><h1>Magali's portfolio</h1></div>
<div id="main" class="right">
<div id="content-textbox">
<div class="intro-left">
Text comes here.
</div>
<div class="intro-right">
<img alt="Me!" class="resizeProfile" src="images/magali.jpg">
</div>
</div> <!-- Closing of div content-textbox -->
</div> <!-- Closing of div main -->
<div id="footer" class="right">
<?php include('language.php'); ?>
</div>
</div> <!-- Closing of div valigner -->
</div> <!-- Closing of div container -->
</body>
Please check out my website (http://www.magalidb.0fees.net). It displays correctly in Chrome and Safari, but incorrectly in Firefox, Opera and Internet Explorer.
I'm very puzzled about this, so any help is very welcome.
!!!EDIT!!!
I found it! It works perfectly now.
I replaced the code from both container and valigner, to the following:
#container {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
overflow: visible;
}
#valigner {
position: absolute;
left: 50%;
width: 940px;
margin-left: -470px;
height: 540px;
top: -270px
}
The code explains itself, it's just so logical. I searched for an alternative method on centering content horizontally and vertically and found this. I feel silly now because I used this method before, yet I neglected it because I thought it was outdated...
Thank you guys for your help anyway! It is greatly appreciated. ;)
PS: I can't answer my own post. I tried, but I get a notification: "Users with less than 10 reputation can't answer their own question for 8 hours after asking. You may self-answer in 5 hours. Until then please use comments, or edit your question instead.".
So I edited my question, like the notification suggested me. I plan on editing the question again after those 5 hours and post an answer the correct way, but until then I can't do better than this. Sorry!
I know you've answered your question, but I'm a bit perplexed about how you've coded your site. There may be a valid reason for it, and if so, a moderator can delete my comment, but I don't think you need all the positioning stuff, especially on both the #container and #valigner elements. In fact, I reckon you could do it using 2 attributes on the #container elements, not using any messy position: absolute; techniques or anything. Here is my suggestion:
#container {
width: 940px; // or whatever you want the width to be. I think this is what you specified originally.
margin: 25px auto; // Centre the design in the middle of the page and put it 25px from the top and bottom of the browser window.
}
I reckon that's it. You could delete #valigner and just use this. If you carry on using position: absolute; everywhere, especially on your top-most containing elements, it will all start to get very messy later on.
I'm wondering what the best way to go about doing this is...
I have 3 divs:
a div#container with width=100%; that holds 2 inner divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)
#container {
width:100%
}
#inner_left {
display:inline-block:
max-width:200px;
}
#inner_right {
display:inline-block;
width:100%;
}
The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...
Any help for a CSS noob is much appreciated!
I haven't really seen a good solution in the answers here. So I'll share mine.
Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.
Example:
<div id="left">
Left
</div>
<div id="right">
right
</div>
CSS:
#left {
display: table-cell;
min-width: 160px;
}
#right {
display: table-cell;
width: 100%;
vertical-align: top;
}
Have a look at "liquid layouts" it can describe what you're talking about.
You're probably looking for this one.
In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)
The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.
Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.
I'll also include it below:
HTML
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
CSS
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.
.container {
display: flex;
}
.left {
width: 100px; /* or leave it undefined */
}
.right {
flex-grow: 1;
}
/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">
<div class="left">100px</div>
<div class="right">Rest</div>
</div>
So even though I wanted to do this with CSS only, I ended up just using tables...
Use floating:
#container{
width:100%
}
#inner_left{
float:left;
max-width:200px;
}
#inner_right{
float:left;
width:100%;
}
Edit: have a read a this, it's a nice little guide : quirksmode
you need to provide position:absolute style property to both your div's
This is based on #w00 's answer. +1 friend.
My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.
.sidebyside-left-fixed, .sidebyside-right-fixed
{
display: table-cell;
width: 100%;
}
.sidebyside-left-fluid , .sidebyside-right-fluid
{
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).
Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/
Here's the HTML part:
<div class="wrapper">
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
</div>
And the corresponding SCSS:
.wrapper {
position: relative;
}
$left_width: 200px;
.left {
position: absolute;
left: 0px;
width: $left_width;
}
.right {
margin-left: $left_width;
}
If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).
Credit: This is based on http://htmldog.com/examples/pagelayout2/.
There are several other useful ones there.
i have one div and some text inside it. to make my content horizontally and vertically center i use a css. it works fine in firefox but content not being vertically center when test the following code in IE6.
so please guide me what i need add or change in my css.
my html code is
<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: green;
height: 200px;
width: 250px;
}
</style>
</head>
<body>
<div class="content">
Hello.
</div>
</body>
</html>
please have look at my css and tell me why it is not working in IE also please rectify my css in such a way as a result it should look same in all the browser.
thanks
you can wrap your text with a span and then set position:relative and top:45%;
.content span {
position:relative;
top:48%;
}
live example: http://jsbin.com/ovabo4/3
Here you will find a great guide: Vertical centering with CSS
A good method is to do this, so it is always exactly in the middle (only works if you have a fixed height div)
<div class="centered"></div>
html, body{height: 100%;}
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */