I have to use a float div (the main window of my application), and I'd like to center that floated DIV based on the client's screen width. How can I accomplish that?
Right now I'm using a left:20% but that's not always centered depending on the user's screen resolution
Do you want the div to grow relative to the browser window, or to fit the content inside of it?
If the former, you can just use a percentage based width rather than pixel, and it should still center.
If the latter, don't use a float...start by setting width:auto; (I think that should make it auto-expand to fit content). Then you will need some javascript to measure the width of the DIV, set the width: css property in pixels, then measure the browser window, and center the container based on these measurements.
Sorry, I was wrong about width:auto;. I guess just float it, and then use javascript like I described above to manually set the margin-right and margin-left.
Sorry, thought up a better solution.
#float {
float:left;
margin-left:50%;
position:relative;
}
And then, using jquery,
$(document).ready(function() {
var float_width = $('#float').width();
var left_spacing = float_width / 2;
$('#float').css('left', '-' + left_spacing);
});
Forgive me if my javascript is off or doesn't quite work...I didn't test it and I'm a JS noob :)
You can try to use
.mainWindow {
margin: 0 auto;
}
then make sure the parent element is text-align: center;
I usually use an auto centered container div and then put any other containers (like your floated div) inside that container. Is there any particular reason you can't do that?
Example CSS:
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
My solution is easy with css
.div{
position: absolute;
top: calc(50vw);
left: calc(50vw);
}
is code clean
Related
I was searching around for a way to vertically center a div in a container. I found a few different ways, but all of them seemed to be very "hacky".
My question is, why is there not just a css property, such as align-vertical that can simply be set to center to center the content? It seems like adding this to css would make so many things much easier.
I am assuming there must be a reason why something like this is not implemented, and I would like to hear if anyone has any idea why.
It's because how browsers traditionally work.
In a browser, by default, the content scrolls vertically. The viewport width is well defined (width of the device), but the viewport height can be one or two times the height of the device, or can even be infinite (as in infinite scrolling).
Traditionally blocks were meant to be horizontally oriented. You place a div and it's automatically occupying 100% of the width of the parent. But its height value is contrained to its content.
If you do
.mydiv {
background: red;
width: 100%;
height: 100%
}
Nothing changes, since divs have already 100% of width, and it can't calculate the height, since it doesn't know how far the viewport will go. You need to add:
html, body {
height: 100%;
}
to tell the browser to use the device height as the 100% value.
That's why horizontal center is easy: you know what the boundaries are, and how to center the element. But vertical center is more complicated, that's why (before flexbox), you need to resort to absolute positioning or hacks.
Flexbox allows you to render content horizontally or vertically, so it's prepared to handle centering along two axes.
If you want to read more about this, I suggest the spec:
Visual formatting model
Visual formatting model details
#outerDiv{
display:flex;
width:100%;
height:200px;
background:#ccc;
align-items:center;
}
#innerDiv {
background:#aaa;
width:80%;
margin:0 auto;
}
<div id="outerDiv"><div id="innerDiv">Hello</h1></div>
Run the script and the div remain in the center.
You can mix and match the combination like this.
Earlier you need to play with the height of the parent container and self height.
But with flex it becomes easy.
If I'm trying to center an element I do the following -
*parent-item {
margin: 0 auto;
width: 100%;
display: block;
It's important to define the width of the element you are centering.
I was playing around with a responsive design and wanted to know how to fill the header with a background color without defining a pixel height - which I normally would do but is non-responsive.
My demo example is here and you can see I was trying to fill the header with a yellow
1) header{overflow: hidden;}
2)
header:after{
content:'';
display:block;
clear:both;
}
This will do the trick, but you may consider adding some padding too:
header {
background-color: #FABA1A;
overflow: hidden;
}
You're using float to the children elements so you need to clear them by using clearfix techniques which you may google that.
You may use overflow:hidden; for quick and nice solution
header {
background-color: #faba1a;
overflow: hidden;
}
You could instead of setting a pixelated height set a percentage (of course, you'd then have to set the same div to an absolute positioning).
div {
height: 10%;
position: absolute;
}
add rule
header {float: left;}
The issue is that your contents of the div are all floated so it's collapsing to 0 height. You can just fix this by floating the container too. Depends on what else you want to add really.
Let's say I want to create an HTML page with one main div that holds all the content.
The div should hold other divs and be fixed in the center of the page like in the image.
How should I specify the width? In a % value or a value in px? What is the best practise?
And what should be the correct value?
Please sorry if this has been covered before....
Image is here:
EDIT
So much nice answers... Thank you all very much
It all depends on the content you will be presenting and what you want to do with it. You may choose to use a fixed width layout if there is no need for the content to expand, or if you want to keep the text/design constrained within the width of the DIV. Though, one thing you may want to consider is using a combination of percentage and fixed width. For example, you may choose for your DIV to be 95% of the page as long as the minimum width is not below 700px and the maximum width is not over 950px. The result of this is a DIV that will expand and contract within your specified constrains.
div#container {
width:95%;
max-width: 950px;
min-width: 700px;
margin: 0 auto 0 auto;
}
In my opinion you should use px
Cause the % will depend on the wide-screen of the user, so images could display bad
I can't see your image but you can do that with two divs using percentages.
HTML:
<div id="outer">
<div id="inner">Your centered div</div>
</div>
CSS:
#outer {
width: 100%;
}
#inner {
width: 50%; // whatever width you want - I can't see your image
margin: 0 auto;
}
To center the div simply put left and right margins to auto on css.
Regarding the % or px, it would REALLY depend on the layout you are willing to code. If your layout was made thinking in a fluid layout, then you should use % but add a max-width so it would not stretch past n px.
For example:
You layout was made for a 1024px screen using 960px grid. But it would be cool to let it stretch a bit for 1280px screen users. So you put width:100%; and after ir, max-width:1280px.
So any user with bigger screen will see the layout for a 1280px.
I will suggest to use body margin:0 and use container div with margin auto, and use pixel for content width and height.
<div class="container">
<!-- HTML Content here -->
</div>
.container{
margin-right: auto;
margin-left: auto;
}
Css float left and right control the flow of the div. if you want to place two divs, right and left, then use
.left-div {
float: left;
width:200px // use pixel to control width
margin-left: 5px;
}
.right-div {
float: right;
width:200px;
margin-right: 5px;
}
First: Holding that main div in center position can be done with margin-left: auto; margin-right: auto;.
Second:
I don't think, that there is a basic best practice, because the usability of variable with depends highly on the content itself.
One usable solution that covers both could be using fixed width depending on the device (desktop, table, phone) using media queries.
In a fluid layout I need in the same line, side by side, a fixed-width block and a fluid width block with a max width. When the window is resized, the fluid width block should resize being "pushed" by the fixed width block.
Here is what I came to achieve: http://cssdesk.com/gHvUB
But sadly the content expands outside its container .....
Anyone ?
One way to achieve your goal with the example you gave would be to
Add a right margin of 200px to the fluid box
Add a relative position of -200px to the fixed-width box.
.line {
...
position: relative;
}
.fluid {
...
margin-right: 200px;
}
.fixed-width {
...
position: relative;
top: 0;
right: -200px;
}
With css (and especially css3) there are going to be many different ways to achieve this.
Here a couple examples:
example
example
And here on the site:
CSS Layout 2-Column fixed-fluid
Ok, the easiest way is to set the container to overflow: auto. Then set both child containers to position: absolute. Since the container's position:relative they'll sit inside the parent. Then you need to set the parent's height to something. You can try min-height: (value). I have a sample here.
Hope this helps.
I have a "ribbon" type header on the top of my website:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
position: absolute;
top: 0;
left: 0;
margin-bottom: 100px;
padding: 10px 0 0 0;
color: #C0C0A8;
}
The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:
#pagebody {
width: 60%;
margin-left: auto;
margin-right: auto;
}
The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.
Is there a better way of doing this?
As per my comment in another answer:
You can just use width: 100%, but make sure you remove the default gap it leaves with:
html, body {
margin: 0;
padding: 0;
}
You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)
Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:
margin-top:50px;
Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.
There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.
If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.
You didn't provide html so we don't really know what you're up to totally.