I wanted my left right content be centered after zooming in 500% plus on the web page, I have tried so many ways, but still don't have an answer can anyone give me a hand here please.
copy and paste to make a new webpage, you can't see if you paste on fiddle or codewall.
html:
<body>
<div id="lower_body">
<h1>center content</h1>
<div id="outer_warpper">
<div id="outer">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
</div>
</div>
</body>
CSS:
#lower-body {
margin: 0px;
padding: 0px;
}
#outer_warpper {
width: 100%;
height: 100%;
margin: 0px;
padding-top: 2%;
padding-bottom: 2%;
background-color: yellow;
overflow: hidden;
}
#outer {
background-color: black;
text-align: center;
vertical-align: middle;
display: table;
margin:0px auto;
overflow: hidden;
}
#right {
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
#left{
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: grey;
}
img{
widht:100%;
height:100%;
}
h1{
text-align: center;
}
as you can see when it reach 500% (ctrl+mouse scroll), the left and right text is not in the center any more, because it push to left somehow.
can one help me make it? Thank for helping. I had tried the width:% also dont work, some one say it need to be done in #media.
This is a normal behavior...
Your two divs are positioned relatively next to each other. If they can't fit the one next to the other then the second one will reposition itself underneath the first one...
if you REALLY want to make it work on 500% zoom what you can do is:
Resize your divs (example)
Use % widths (example2)
Personally i would go with my second example. The choice though is yours (depending always on why you need to achieve this)
PS: % width was not working because you were using display:table; on the #outer div
This is not a problem or even a bug, it's just the normal behavior of the browser. It's just too much zoom to keep any consistency. I think 400% is the max in this case. If you try it in FireFox, you won't get this problem because it doesn't go till 500%.
It's pretty good to be concerned about zooming in a web page, but 500% is just too much to any page work fine.
Related
Desired Outcome:
Further Details:
Right now I am setting the Div height based on estimates (ie. 10% for search bar, 60% for middle and 30% for bottom) and set the thumbnail size to fit well on my Samsung Phone. The problem is that on different phones, the width is different and Div3 ends up with large borders. To complicate matters, Div2 can scroll up/down (minor problem) but Div3 can scroll left/right (moderate problem).
All thumbnail images are guaranteed to be 16:9 (I believe) as they are obtained from here https://img.youtube.com/vi/NJ2YyejQjpw/maxresdefault.jpg
I'm having conceptual issues trying to size a div (Div3) based on the height generated when an image is stretched the (more or less) the screen width)
Question:
How can I get the three below divs, while allowing for (1) vertical scrolling in Div2 and (2) horizontal scrolling in Div3
Code:
JSFiddle code. Try on iPhone X, it looks weird
Important sections:
#search_bar {
width: 100%;
height: 10%;
border: 0px;
float: right;
padding:0px;
position: relative;
background-color:red;
}
#search_results {
width: 100%;
height: 58%;
padding:4px;
float: right;
overflow:auto;
background-color:green;
}
#playlist_reel {
width: 100%;
height: 32%;
padding:4px;
clear: both;
overflow-x: auto;
white-space: nowrap;
background-color:blue;
}
I went off the diagrams you included and tried to replicate a simple version of it.
Use flexbox for column layout
Have #search_results take up as much space as possible
Have #search_barand #playlist_reel take up only the space they occupy (totally adjustable)
Use a background-image for #search_results so the element is always covered.
Use a static img in .bottom so that it takes up actual DOM space
As for scrolling, the requirement feels a little broad at the time I am posting this. Maybe this demo will get you close enough to experiment with scrolling on your own.
Note: This demo is more easily viewed in either "full page" mode (here in SO) or in the jsFiddle.
html, body { margin: 0; }
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
width: 380px;
max-width: 100%;
margin: 0 auto;
}
#search_bar [type=search] {
width: 100%;
padding: 1em;
font-size: 1.25rem;
}
#search_results {
flex-grow: 1;
background-image: url('http://placekitten.com/400/500');
background-size: cover;
}
img {
max-width: 100%;
height: auto;
}
<div class="container">
<div id="search_bar">
<input placeholder="Search" type="search">
</div>
<div id="search_results"></div>
<div id="playlist_reel">
<img src="http://placekitten.com/400/50" alt="">
</div>
</div>
jsFiddle
I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
And my CSS:
#imagesMain{
display: inline-block;
position:relative;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:center;
}
#imagesMain img{
height: 400px;
width: 300px;
vertical-align: center;
}
The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?
You can use the almost same CSS, but with one simple correction, change:
vertical-align: middle;
And remove these:
display: inline-block;
position: relative;
There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 400px;
width: 300px;
vertical-align: middle;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
Click on Run Code Snippet and press Full Page to check if this is what you are expecting.
Try changing display: inline-block to display: block (as well as removing margin-left: auto; margin-right: auto;. If you're ok with #imagesMain taking up 100% of the width of the screen, with the images centered inside, this will work fine.
try learing flexbox because it has many uses for nicely aligning items and content.
it also keeps your css very small.
if you would like to keep them centered al the time. you should use justify-content: center;
#imagesMain{
display: flex;
justify-content: center;
}
#imagesMain img{
height: 400px;
width: 300px;
margin: 0 10px;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
for alternative uses look at css tricks they give good examples for how to use flexbox.
Probably your problem is the container, because the image are correct align to the center, I have simplify your code and colored the container and images:
#imagesMain{
position:relative;
display: inline-block;
width:100%;
height:250px;
margin-top:20px;
background-color:red;
text-align:center;
}
#imagesMain img{
background-color:blue;
height: 200px;
width: 150px;
margin-left:-4px; /* trick for remove the space beetwen */
}
https://jsfiddle.net/bcpph0pp/1/
UPDATE
Reading other comments I think you want all aligned in the middle, this is a good resource for generate the code for FLEX BOX: http://the-echoplex.net/flexyboxes/
And this is the example: https://jsfiddle.net/bcpph0pp/2/
I'm creating two divs next to each other using code I found on another thread. The problem is that the first div should have a fixed value and the second should just fill the rest, but it seems like it just removes the second div when I'm trying to give it a percentage:
#wrapper {
width: 100%;
overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
height: 150px;
margin-bottom: 10px;
overflow-y:hidden;
overflow-x:hidden;
border-radius: 10px;
background-color: #f1f2f4;
}
#first {
float: left;
width: 150px;
height:150px;
}
#second {
width:100%;
height:150px;
float:left;
padding: 1.5em;
}
<div id="wrapper">
<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
<div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Image:
Why the problem occurs:
You have #second { width:100%; }. This means that both elements won't fit next to each other since the second one will need the full width of the container. But the first element already takes all the height, and you have overflow: hidden; so the second one goes out of the container (below) and is not visible at all. Just to see where it went you can reduce the height of the first item a bit (say from 150px to 120px).
Your layout can very easily and intuitively be achieved with flex-box instead of floats. All modern browsers support it now.
#wrapper {
width: 100%;
margin-bottom: 10px;
overflow:hidden;
border-radius: 10px;
background-color: #f1f2f4;
display: flex;
}
#first {
width: 150px;
height:150px;
flex-grow: 0;
flex-shrink: 0;
}
#second {
width:100%;
height:150px;
padding: 1.5em;
}
<div id="wrapper">
<div id="first">
Lorem ipsum whatever I'm writting in here.
</div>
<div id="second">
Lorem ipsum whatever I'm writting in here.
Lorem ipsum whatever I'm writting in here.
Lorem ipsum whatever I'm writting in here.
</div>
</div>
The probem is you set width:100% and float, with 100% there is no way that div can floats aside the previous one.
You can remove the float and width on the second one, but maybe you can't handle well the padding:
#wrapper {
width: 100%;
overflow: auto;
/* so the size of the wrapper is alway the size of the longest content */
height: 150px;
margin-bottom: 10px;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 10px;
background-color: #f1f2f4;
}
#first {
float: left;
width: 150px;
height: 150px;
}
#second {
height: 150px;
padding: 1.5em;
}
<div id="wrapper">
<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
<div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Or use calc and box-sizing to determine the width:
#wrapper {
width: 100%;
overflow: auto;
/* so the size of the wrapper is alway the size of the longest content */
height: 150px;
margin-bottom: 10px;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 10px;
background-color: #f1f2f4;
}
#first {
float: left;
width: 150px;
height: 150px;
}
#second {
box-sizing:border-box;
float:left;
width:calc(100% - 150px);
height: 150px;
padding: 1.5em;
}
<div id="wrapper">
<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
<div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Your #wrapper element has a fixed height. The #second element is off the bottom.
Since "second" spans the whole width it wraps to the next line and is hidden because the container has a fixed height. Just remove width and float attributes from "second" div.
I'm just writing this answer to make people avoid wasting their time on debugging for just a silly mistake, like i did. Any div that i was placing next to my "navbar div" in my website was going before my navbar instead of going next to it. When i removed the "position: fixed;" in my navbar it went quite well.The problem usually occurs with my code is that sometimes i do this with my navbar:
.anyclass
{
position : fixed;
}
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.