Appologies for a duplicate question, but none of the answers to the other questions seem to fix my problem. I would like to align a div in the center of the page. The div must only be as wide as the content inside it. It will be used as a modal popup. I have setup a jsFiddle here: http://jsfiddle.net/PDzNj/11/
The div aligns its left side in the middle and not the center of the div (which is the desired effect)
Thank you in advance for any help
One option is to emulate a table with the <div>'s surroundings.
<div class='outer'>
<div class='inner'>
<div class='thebox'>Contents</div>
</div>
</div>
And then use the CSS:
div.outer {
display:table;
width:100%; //Or however wide you want the container to be
}
div.inner {
display:table-cell; //This allows the use of vertical-align
vertical-align:middle;
text-align:center;
width:100%;
}
div.thebox { //Your variable-width container
display:inline-block; //Makes it obey text-aligning.
}
You can of course add height values as needed. This is neater, CSS wise, than making it relative, or using margins, and also disrupts the surroundings less.
Related
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
Right now I have a main div with an id of "wrapper", and inside this div I am trying to make two other divs that take up about the entire width of "wrapper". The first div, "sidebar", is narrow and contains some information I want displayed on the far right of "wrapper". The second internal div I have will be dynamically updated using php and javascript from data inserted by users, id called "maincontent".
I can get them positioned inside "wrapper" fine at first. The problem comes when new content is added in the "maincontent" div. When new content is added the "sidebar" div will move down proportionally to the height of the newly added content.
So, my question is this:
How do I get the two internal divs to maintain their positions on the top of the page while still being able to extend dynamically downward without anything moving around?
you need to float:left your left-content:
see the css below:
.wrapper
{
margin:0;
padding:0;
top:10px;
width:100%;
height:500px;
background-color:yellow;
}
.left-content
{
position:relative;
width:20%;
background-color:red;
height:100%;
float:left;
}
.main-content
{
position:relative;
width:80%;
left:20%;
background-color:green;
height:100%;
}
where your divs are as below:
<body>
<div class="wrapper">
<div class="left-content">
</div>
<div class="main-content">
</div>
</div>
</body>
what's important is, you accurately divide the width of the parent to the child containers
i.e. total width of child containers <= parent width
see, you need to learn about position attribute of css-style
when you do position:relative for any container, css properties like top, left,right,bottom starts working for them.
Check out my fiddle, the Javascript is completely unnecessary. Let me know if it helps you, or if you have any questions left. The most important part is having float: left or float: right in both the maincontent and sidebar.
http://jsfiddle.net/y89zp/
How can i fix the unwanted margin of the "right" div.
The right floated div is margined like you can see here:
JSFIDDLE: http://jsfiddle.net/s9Ssh/1/
The effect i wanted to achieve is to keep .mid layer always centered no matter the lenght of side div's text.
HTML:
<div class="main">
<div class="left">left</div>
<div class="mid">
Vpis podjetja
|
Iskanje
</div>
<div class="right">right</div>
CSS:
.main {
text-align:center;
width:100%;
}
.left {
float:left;
}
.mid {
}
.right {
float:right;
}
Maybe this will help: http://jsfiddle.net/sbhomra/s9Ssh/4/
I have basically absolutely positioned the left and right div's and set the middle div to stay in the center by using margin:0 auto.
Edit
Fixed padding on left and right div's, so they are not too close the side of the page.
http://jsfiddle.net/s9Ssh/3/
Move the right floated element before the middle element in the markup. It appears on a new row because the middle element isn't floated (and is a block level element).
Alternatively you can also float the middle element or set it to inline/inline-block.
EDIT: Although to clarify, if you float the mid element then you have to fiddle around with css a little since it will break your text-align. :P
try to add display: inline-block; to .mid element
example fiddle : http://jsfiddle.net/XSdJA/
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}
I was wondering if this were possible, and if it is the best way to go about this:
example image (since I'm not allowed to post pics yet ^^)
So, not only does each column have to be of equal height, but each column also has its own individual footer.
I saw this SO post — how could I rework this technique to apply to the bottom of the divs and not the bottom of the window?
Edit: each column will have content that will constantly change and be of variable height. I'm thinking I could just figure out the equal height columns first, then just absolute position a footer div within those columns. Does its parent div then have to be position: relative?
Looks like a nested div in each that has the same properties. So each outer div is the same size, and so do the inside div.
.outer
{
height:500px;
float:left;
margin-right:20px;
}
.inner
{
height:30px;
width:100%;
margin-top:-470px;
}
<div class="outer">
<div class="inner">
</div>
</div>
Didn't test this; off the top of my head!