In a wrapper div, the floated elements don't seem to respond to left and right margin settings. Example:
html:
<div id ="wrapper">
<div id = "content"></div>
</div>
css:
#wrapper
{
width: 1000px;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#content
{
width: 400px;
height: 200px;
display: block;
float: left;
margin-left: 30px;
}
The #content ignores its left margin setting. Why?
Margins do not move floated elements, they "push content away".
If you want to move the floated element, you could give it the following CSS rules:
#content {
position: relative;
left: 30px;
}
An alternative is giving the element a transparent border:
#content {
border-left: 30px transparent;
}
If you are just looking to position a div inside of another div, then use absolute positioning:
#wrapper {
position: relative; /* required for absolute positioning of children */
}
#content {
position: absolute;
left: 0;
}
A more recent CSS technique that works perfectly in this scenario is to use the CSS transform property with a translate X or Y. This acts on the floated element only, so does not have the unintended effect of moving other elements around.
An example transform is this:
.floated-element {
// move the floated element 10 pixels to the left
transform: translateX(-10px);
}
#Marcus's answer is good. Another way to fake having margins on a floated element is to put the content inside of another container and use padding:
.outer
{
float: left;
padding: 10px;
}
.inner
{
}
Related
EDITED: I have a div that takes up the left half of the window. Inside that div are two other divs. How do I stack the inner divs on top of one another, while floating both divs to the right. If you look at the JSFiddle, the two divs are side-by-side
http://jsfiddle.net/eka1ccsu/1/
What's the CSS property to place one div beneath another while the two divs are float: right?
Code:
#charset "UTF-8";
/* CSS Document */
#bdy{
font-family: Verdana, Geneva, sans-serif;
position: relative;
}
#left{
height: 100%;
width: 50%;
position: relative;
display: inline-block;
float: left;
bottom: 0;
}
#right{
width: 50%;
height: 100%;
display: inline-block;
float: right;
bottom: 0;
}
#nentry {
position:relative;
float: right;
margin-top: 100px;
}
#nuser {
position:relative;
float: right;
margin-top: 100px;
}
You can use clear: both; to set a floated element on a new line. Also, setting #right and #left to inline-block does nothing for your purposes. Setting the width and then setting the float property with put both elements side by side splitting the page in half.
Inline-block TYPICALLY is used for nav elements. Or for vertically centering objects in special cases.
http://jsfiddle.net/eka1ccsu/2/
I just took a literal take on your question, i float the parent of two div, so the child behave as block element.
<div style="float:right;">
<div id="nuser">
Add New User
</div>
<div id="nentry">
Add Entry
</div>
</div>
I am new to webdesign, I am using Phonegap (HTML5) I centered my image horizontally this way:
.html
<div id="loginholder" >
<img id="image_person" src="img/icon_login.png" />
...
.css
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
...
#loginholder{
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
}
...
Please why my margin-top is not working?
You need to trigger layout. Add overflow:hidden to #loginholder
I'd add padding-top: 30px; to #loginholder instead and remove the margin-top: 30px; from #image_person:
CSS
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
}
#loginholder {
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
padding-top: 30px;
}
Check out this JSFiddle: http://jsfiddle.net/bazC4/.
Also, if you wanted the #loginholder the same size, just remove 30px from the height so it would be height: 170px;.
The margin might be collapsing with the parent, causing the 30px margin to appear above the loginHolder div (more on margin collapsing). To resolve this, you could do one of the following:
Add a border or padding to loginHolder; this separates the margins so they won't collapse.
Change to using padding-top on the image instead of margin-top.
Try wrapping it in a div:
JSFIDDLE:
http://jsfiddle.net/MBLKs/
CSS:
#loginholder {
width: 300px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
#stabilizer {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
Images behave like characters, so entering them doesn't always work. In this case, the position of the wrapping div and the image offset each other, leaving the image in the middle. Now your margin-top and everything else should work.
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
I'm currently in planning stage for a site, which needs to scroll horizontally.
The simplest solution I have to tackle this is to go in this direction, JSFiddle.
I'm not sure if this is the best option, as I will have to arrange each div individually i.e. left: 100% left: 200%;.
Is there a way around the divs, with a display: inline-block value auto wrapping to the viewport, so I don't have to arrange each div individually?
Removing the absolute positioning
What you need to do here is remove the float and absolute positioning from your dividers and simply add white-space: nowrap to your body. As your dividers are set to display as inline-block, these get affected by the white-space property.
body {
margin: 0; padding: 0;
white-space: nowrap;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
}
JSFiddle demo.
Removing the spaces between each block
Now that we've removed the floats and the positioning, you'll notice that there is a white space between each divider. If we refer to this CSS Tricks article, we can remove this by simply giving the body a font-size of 0, and giving each divider a font-size of what you're wanting the font size to be within those blocks:
body {
margin: 0; padding: 0;
white-space: nowrap;
font-size:0;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
font-size:16px;
}
Second JSFiddle demo.
http://jsfiddle.net/MsRCS/3/
You can remove the absolute positioning and use float instead.
body {
margin: 0; padding: 0;
width:300%;
}
.full {
width: 33.3%;
height: 100%;
display: inline-block;
float: left;
}
#screen-1 {
background: red;
}
#screen-2 {
background: blue;
}
#screen-3 {
background: yellow;
}
I have a container that drops down like a notification container, I want to have two bars side by side inside the absolutely positioned div.I don't want to have to define a width because each div inside will need to adjust widths (because of the presence of a scrollbar or not)
The problem is odd, when .notification-wrapper has absolute or relative positioning the .left and .right divs won't align side by side, however when i remove absolute/relative from .notification wrapper they do...(i do need relative/absolute to be applied to notification.wrapper)
Here's what I have:
<span class="notification-wrapper">
<div class="notification-container">
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</div>
</span>
.notification-wrapper {
height: 32px;
width: 25px;
margin-right: -12px;
margin-left: -12px;
padding: 0px;
font-size: 0px;
position: absolute;
left: 50%;
top: 15px;
right: 50%;
}
.notification-wrapper .notification-container {
font-size: 12px;
background-color: #FFF;
height: 100px;
position: absolute;
top: 25px;
}
.notification-container .left {
vertical-align: text-top;
display: inline-block;
background-color: #63F;
width: 50px;
}
.notification-container .right {
vertical-align: text-top;
display: inline-block;
background-color: #FFC;
width: 120px;
}
That's because when you position an element it "shrink-wraps", meaning it shrinks to its smallest size. Since there's nothing forcing your two elements to reside side by side the smallest size it can get is if it stacks the elements instead.
I think, since you're using inline-block (rather than float), you could use white-space: nowrap on the container to force the two inline-block elements not to wrap. You will probably wanna set white-space back to normal for the contents of the elements though.
Also, a span element is an inline version of div and does not allow block level elements as children.
I do not know your code, Please try this code
.absolute-positioned{ overflow:hidden; float:left; width:auto;}
.absolute-positioned ul{ width:auto; list-style:none;display:inline-block; }
.absolute-positioned ul li{ display:inline-block; list-style:none; line-height:auto;}
.absolute-positioned ul.left-bar{ float:left; width:auto;}
.absolute-positioned ul.right-bar{ float:right; width:auto;}
Try this
remove width:25px from .notification-wrapper
remove position:absolute and top:25px from .notification-wrapper .notification-container, instead use padding-top:25px
change right:50% in .notification-wrapper to left:50%