So, I have a few divs that i want to center.
I'm currently using this css code on something i call a "container div" - you've most likely heard this "container" thingy before.
#container {
margin: auto;
width: 75%;
margin-top: 100px;
}
Although this does not seem to center the divs when resizing the window; If I resize the window, the divs will follow slowly and by that -move further away from the center.
Fiddle - https://jsfiddle.net/kud3f01n/
What is causing the divs to behave like this?
As verified in your example, I've found that you made those blocks design by using margins(negative and high range values). Hence even you are giving main container width 75% or any other still it will overflow from the parent div. And this kind of CSS will create critical issues in smaller devices.
Suggestion: Try to avoid this type of CSS. And if you need this type alignment and it has t be work in responsive also you can some third party plugins such as masonry.js etc.,
Try this
#container {
height:50px;
width:50px;
position:absolute;
left:50%;
top:50%;
margin: 0 auto;
}
Related
So, currently I'm trying to set the minimum height for some css tabled content based on the height of the picture rather than the height of the text.
In essence, my layout is like this:
<Image #60% width> | <Text #40% width>
And I'm currently using flex boxes to do this.
However, right now, when the page is resized (I cannot use static heights as it needs to be fully responsive), at a certain point the image becomes extremely small and the text makes the container huge.
I'd like, ideally, for the text to be the same height as the image at all times and, if there is overflow, for it to be scroll based.
Here's my current Jsfiddle.
http://jsfiddle.net/D7h3z/4/
I'm not averse to using technologies that are new/experimental. I am averse to using JavaScript for this as there shouldn't be a need. And if I do need to, I don't use JQuery, so please avoid that in your answers if you can.
3check out the changes I made to your fiddle -- New Fiddle
Essentially, I made the inner span of description absolute positioned and then placed an overflow-y auto on it's container span. I the applied a min-height of 200px to the img container and it appears to be working as you described. Let me know if this isn't the case.
.description {
width: 40%;
padding: 10px;
position: relative;
overflow-y:scroll;
}
.imagebox {
width: 60%;
min-width: 300px;
}
.imagebox img {
width: 100%;
min-height:200px
}
.description span {
padding: 10px;
position: absolute;
}
EDIT Actually doesn't work 100% yet, the image doesn't maintain aspect ratio... sad trombone
EDIT 2 Added in a min-width which sorta gets it there, but from a dynamic standpoint, this is far from ideal. I will give it another look later tonight.
My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!
A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)
Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.
This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers
OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/
So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen
You see tons of sites with their content very nicely centered, like dribbble.com for example. Even when the window is resized, the content stays centered and when it hits against the side of the page, stops.
I would really like to get this behavior on my website but I'm not really sure how to go about the CSS to make this happen... I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.
Can someone help me figure out how to do something like this?
The standard practice is to have a div that wraps your centered content, such as...
<div id="container">
...everything you want to center
</div>
And the in your CSS:
#container {
width: 970px;
margin: 0 auto; /*first value the margin for top and bottom, auto puts automatic margins in the left and right to center the content*/
}
I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.
It's simpler.
selector-that-matches-a-container {
width: <some length>
margin: auto;
}
Maybe with this CSS:
.content {
position:absolute;
left:100px;
right:100px;
}
We have a login page that is designed to have a 200px-high DIV vertically centered in the middle of the page. That is, it creates a 200 pixel blue band left edge to right edge (with form elements in it) that ideally should remain vertically centered in the viewport no matter how the browser window is resized.
This must be a CSS solution.
So let's say here's some sample markup:
<body>
<div id="mainDiv">
<div id="centerDiv" style="height:200px;background-color:blue;color:white">
Center this baby vertically in the #mainDiv, please!
</div>
</div>
</body>
Assume that my CSS dictates that the #mainDiv is stretched to cover the viewport top and bottom, which is easy enough to do. Are there CSS rules that I can apply to any of the elements or the page that will reliably and cross-browser (incl. IE6) vertically center #centerDiv? In a perfect world we should just be able to say
#centerDiv {
margin: auto 0;
}
And even in an OK world we should be able to address this issue with a few styles. But to quote Ving Rhames' character from Pulp Fiction, We're pretty %&#!ing far from OK.
I've looked at the solutions offered in Related Questions and scoured the Web. Nothing I can find really works 100%. Maybe this is unsolvable, but I thought I'd give the collective brains here the problem and see if I can get lucky. Thanks in advance.
If you have a fixed height, you can do it. Give the child div a top of 50% and a margin-top of -100px (or vice-versa) and you should be set.
if height unknown:
http://jsfiddle.net/Limitlessisa/a7xw6b2c/
.centerdiv{
background:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
For true automatic positioning in the center, the inner DIV would need to know the boundaries of the containing DIV. If your container does not have hard boundaries, there is no way for the inner DIV to calculate its own position automatically. It simply has no frame of reference.
The closest I think you can make it with a simple CSS solution is this:
#mainDiv
{
border: 1px dashed #000000;
}
#centerDiv
{
margin: 33% auto;
height: 200px;
}