<div id="wrapper">
<div id="content" style="background-color: white;">
...
</div>
</div>
#content{
float: left;
width: 540px;
padding: 30px 30px 0px 30px;
background-color:#19252f;
text-align: left;
min-height: 500px;
}
#wrapper {
margin: 0 auto;
width: 800px;
}
Firefox look
Internet Explorer 8 look
margin:auto horizontal centering is not supported in IE6. Instead you can either use absolute positioning to center or you can do
body{
text-align:center;
}
For IE min-height you need to add the hacked property _height: 300px in addition to min-height: 300px;
All browsers but IE will ignore the hacked property, and since IE effectively treats height as min-height, you’ll get the effect that you want in all browsers.
background-color works in IE without any problems.
Related
Here's a JsFiddle.
HTML :
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">
<div data-role="page" >
<div id="contentwrap">
<div id="content" data-role="content">
<img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />
asdad asd asd asd sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
</div>
</div>
</div>
CSS :
html, body {
height: 100%;
}
#contentwrap {
display: table;
height: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
}
#contentwrap img {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom: 10px;
max-width:100%;
}
#content {
height: 100%;
display: table-cell;
text-align:center;
vertical-align:middle;
}
As you can see if you test it, the "max-width: 100%" attribute only works on Google Chrome. With Firefox and IE, the image width stay the same... With Chrome, the image adapt to the window... :
How can I fix it ? (at least with IE11)
I found other posts with the same problem but none gave a good solution...
There's actually a really simple solution to this -- you need to set the table-layout property to fixed on the element that is set to display: table.
#contentwrap {
display: table;
table-layout: fixed;
height: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
}
Here is one way of achieving the desired layout.
I left out some of the jQuery Mobile classes and just used native CSS/CSS3.
For this HTML:
<div id="contentwrap">
<div id="content">
<img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />
asdad asd asd asd sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
</div>
</div>
modify your CSS as follows:
html, body {
height: 100%;
}
#contentwrap {
background-color: beige;
margin: 0 auto;
max-width: 500px;
height: 100%;
display: table;
}
#content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content img {
display: block;
margin: 0 auto;
width: 100%;
max-width: 300px;
}
I applied CSS tables to #contentwrap and #content similarly to your original CSS, that way you get the vertical alignment in the middle as required.
You hard coded the image width to 300px by setting the width value in the img tag.
To get the image to scale with the width of #content as it narrows in width, set the width: 100% that way the image will fill the width of #content, and to prevent the image from getting too wide, set a max-width value as needed, 300px in my exammple.
You may run into conflicts with CSS rules in jQuery Mobile, but perhaps someone else can help with any issues is they arise (not my area of expertise).
See demo: http://jsfiddle.net/audetwebdesign/ZMLDD/
Note: If you set the max-width value for the image, then you may not need to set the width attribute in the img tag.
I checked this in the latest versions of Firefox, Chrome, IE and Opera and this solution appears to work.
Always remember, max-width does not inherit from other parent
elements. As the width of 300px has been defined with a max-width of
100%, the initial width value will always override the max-width value
of 100%
So instead use min-width: 300px and max-width: 100% which will make it to work in all the browsers
Responsive images for Firefox, IE, Chrome. Simple solution that works in Firefox
<div class="article"><img></div>
.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}
I can't make it any clearer than this, sorry. I want to properly align 4 divs (on a width of 1150px as that is max-width of the content div) and upon resizing when it can't do 4, 3 in the center etc etc)
On >1150px screens it would/should like this: http://i.imgur.com/KaOPqZK.png. Now, the closest I can come is this: http://i.imgur.com/6khwQkR.png. I can set the first-child margin to 0 on the left one, but as there are multiple rows, those would still have the padding. Creating new rows as divs isn't possible either, because that would ruin everything when it's resized and only shows 3/1 on both rows.
When resizing it should center, with even margins on all sides, and not like this as it is right now: http://i.imgur.com/GiR1nZ2.png.
Basically all the code I have right now is this, simply because I know of no other way.
div.project-container {
float: left;
margin: 0 8px 30px 8px;
position: relative;
width: 270px;
}
I'm guessing it has to be Javascript who rescues the day, and I'm fine with that. Pointers in the right direction, examples on the internets, all is welcome. Thank you.
Adapted from an old answer :
HTML
<div id="container">
<div class="obj">1</div>
<div class="obj">2</div>
<div class="obj">3</div>
<div class="obj">4</div>
<div class="obj">5</div>
<div class="obj">6</div>
<div class="obj">7</div>
<div class="obj push"></div>
<div class="obj push"></div>
<div class="pushend"></div>
</div>
CSS
#container
{
max-width: 980px;
background-color: lavender;
display: inline-block;
text-align: justify;
}
.obj
{
width: 180px;
height: 180px;
background-color: lightgreen;
display: inline-block;
margin-bottom: 20px;
}
.obj.push {
height: 0px
}
.pushend {
width: 100%;
height: 0px;
display: inline-block;
}
demo
I'm experiencing a nasty css problem I can't seem to solve.
I want to position a wrapper inside a container with the left property (in the positive direction; negative seems to work for some reason) without the content inside to start wrapping up.
Here is a jsfiddle for the following HTML and CSS.
<div id="container">
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
</div>
</div>
#container {
width: 200px;
height: 200px;
position: relative;
border: 1px solid #000;
/*white-space: nowrap;*//*Works for chrome, but not for firefox*/
}
#wrapper {
position: absolute;
/*left: 100px;*/
}
#one, #two {
width: 80px;
height: 80px;
background-color: #000;
margin: 10px;
float: left;
}
If you uncomment the left: 100px;, you'll notice the two boxes get moved but also wrapped. In chrome, this can be fixed using white-space: nowrap; on the container. It doesn't work for Firefox, though, and also affects the text content. I have tried removing position: relative; from the container and calculating the right offset with Javascript but that's somewhat inconvenient.
Edit: It does work with CSS3's transform: translateX(100px) but I'd still prefer the left variant.
Specifying a width for the wrapper seems to work in both Firefox and Chrome (and doesn't require the white-space property at all). The CSS for wrapper becomes:
#wrapper {
position: absolute;
left: 100px;
width: 200px;
}
I have some nested divs that aren't resizing correctly with the window in Chrome 26 (stable), but they work fine in previous versions as well as in Firefox. Before I go file a bug report, I want to make sure what I'm seeing isn't expected standard behavior that my other browsers just aren't getting right.
Using Chrome 26, try resizing your preview pane on this Plunkr. The #inner element will either shrink or expand beyond the bounds of its parent, which I do not want it to do, and which it doesn't do in previous versions of Chrome or in Firefox.
Setting my #outer div to absolute positioning fixes the issue—except that I need the #outer div fixed in place. I've also noticed that removing position:absolute from #main also fixes the problem…but I need #main to be absolutely positioned.
I'm at a loss as to why this is happening, or even if this is expected behavior. I need the #inner child to resize with its #outer parent, not have the #outer element scale independently. How can I achieve this?
HTML/CSS
<!doctype html>
<html>
<style>
#main {
min-height: 100%;
position: absolute;
width: 100%;
}
#container {
min-width: 400px;
width: 50%;
margin: auto;
position: relative;
}
#outer {
position: fixed;
border: solid 2px black;
margin-top: 100px;
top: auto;
max-height: 150px;
position: fixed;
width: 50%;
min-width: 400px;
margin: auto;
background-color: green;
}
#inner {
background-color: rgba(0,0,0,.5);
padding: 10px;
border: 2px gray dashed;
position: relative;
}
</style>
<div id="main">
<div id="container">
<div id="outer">
<div id="inner">
<input type="text">
</div>
</div>
</div>
</div>
If you change the main container to position:fixed as shown below, it will fix the resizing issue. Don't know what effect that will have on page layout, but it is a similar look.
#main
{
position:fixed;
top:0;bottom:0;left:0;right:0;
background-color:#d3fcee;
}
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!