I have a parent DIV with 3 children DIVs. I need to float left one DIV, float right another DIV, and center the 3rd DIV.
The parent width is 100% so not fixed.
I tried the following but the DIV is not centered:
<html>
<head></head>
<body>
<div style="width:100%;border:1px solid #000000;height:200px;">
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:20px;float:left"></div>
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:auto;margin-right:auto;float:left;"></div>
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
right:20px;float:right;"></div>
</div>
</body>
</html>
I created a fiddle for you to test: http://jsfiddle.net/swS5x/
Thanks
Well, one of the solutions could be to simply add for the #parent add text-align:center; and on #center, remove the float:left; and add display:inline-block;
#parent {
width:100%;
border:1px solid #000000;
height:200px;
text-align:center;
}
#center {
width:50px;
height:50px;
border:1px solid #000000;
margin-top:75px;
margin-right:auto;
margin-left:auto;
display:inline-block;
}
The display:inline-block; makes the element behave much like an image would, which you can center inside a container.
http://jsfiddle.net/swS5x/2/
If you can, reorder your div elements and don't float the #center
See example
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
A floated element will ignore margin: auto for the left and right margins.
Related
So here's my code
<style>
body{
width:100%;
height:100%;
overflow:hidden;
}
.mouse{
background-color: rgb(128,64,0);
border-radius:100px;
height:100%;
width:10%;
position:absolute;
top:100%;
box-sizing:border-box;
}
.left_ear{
background-color: red;
border-radius:100px;
position:absolute;
float:left;
width:30%;
padding:100%;
}
</style>
</head>
<body>
<div class="mouse" id="mouse1">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>
<!--<div class="mouse" id="mouse2">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>
<div class="mouse" id="mouse3">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>-->
</body>
</html>
This is what I get with:
Padding: 100%
Padding: 30%
So how does padding work? I mean I know the basics that it'll increase the surrounding area of the element, but never increases the element's size.
Let's say you got elements like this:
.parent{
padding:20px;
background:blue;
display:inline-block;
}
.parent div{
padding:20px;
height:80px;
width:80px;
}
.child1{
background:green;
box-sizing:border-box;
}
.child2{
background:purple;
}
<div class="parent">
<div class="child1"></div><br>
<div class="child2"></div>
</div>
As you can see, the first child is smaller than the second one, although they got the exact same size and padding.
On the first child I used the property box-sizing:border-box. What this does, it includes the padding in the elements width/height.
If you don't do that, the padding gets added to the elements width.
In your example, you got box-sizing:border-box on the parent element. So if you added margin to that element, it'd stay the same size (except you set more padding than the element is big). On your children, you haven't got this property, so their size gets increased, when using padding.
I'm trying to achieve some indent for content inside div. I want to have all elements inside to have 100% width, but first ones have to be positioned further from the left side. This demonstration shows what I exactly need:
I tried to mess around with ::before pseudoelement for parent div, different positioning and floating but no luck. Is there a way to achieve this in CSS or maybe jQuery?
Use the :nth-child pseudo class to select the items you want and then just give them a margin.
div{
border:1px solid #000;
padding:5px 10px;
}
p{
background:#000;
font-family:arial;
color:#fff;
margin:5px 0;
padding:5px;
}
p:nth-child(-n+2){
margin:5px 0 5px 50px;
}
<div>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
</div>
By the way, floating items and giving them a 100% width is somewhat redundant so I have omitted that from my code.
You don't need to add width:100% to your elements. If they are block elements it will take automatically 100% of the container width. Then just use marginto whatever element you need:
HTML:
<div class="container">
<div class="content margin"></div>
<div class="content margin"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
body {margin:0; padding:0;}
.container {
width:400px;
padding:20px;
background-color:#ddd;
}
.content {
height:60px;
background-color:green;
margin-bottom:10px;
position:relative;
}
.margin {
margin-left:150px;
}
FIDDLE
I have a header div, and inside this I have a caption div. I'm trying to centre align the caption div. Currently the caption div is aligned to the left. I might just be incredibly dim, but i've been looking at code all day, so my mind is fried.
html
<div class="wrapper">
<div id="header">
<div class="caption">First Caption - Health & Safety</div>
</div>
</div>
css
#header {
position:relative;
width:1200px;
height:400px;
margin:auto;
border:1px solid red;
}
.caption {
position:absolute;
width:1000px;
height:140px;
background-color: red;
margin: auto;
}
pls try to remove the
position:absolute;
try to add margin-left:value; to caption class.
for exemple margin-left:10%;
I want to have a solid grey bar in a DIV called "bottomGrey" at the bottom of a container DIV called "contactCopy".
<div id="contactCopy">
<div id="contactLeft">
CONTACT
</div>
<div id="contactRight">
<iframe src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x87e2349d140afa9f%3A0x9b41dc0528aa1d72!2s131+W+2nd+St+%23400%2C+Davenport%2C+IA+52801!5e0!3m2!1sen!2sus!4v1389913120076" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>
<div id="bottomGrey"></div>
<div class="clr"></div>
</div>
the CSS
#contactLeft{
float:left;
width:30%;
padding:5%;
}
#contactRight{
float:left;
width:640px;
height:480px;
padding-top:5%;
padding-bottom:5%;
margin-left:5%;
position:relative;
}
#contactCopy{
position:relative;
}
#bottomGrey{
position:absolute;
bottom:0;
height:10%;
width:100%;
}
but it doesn't display at all, even if I remove the "contactLeft" and "contactRight" DIVS.
This should be simple but :(
Live site: http://estes.nbson.com/contact.html
It is displaying: its just got a white background and no content. Add a background color to it and you'll see what I mean.
Just add this to your CSS:
#contactCopy:after {
display: block;
height: 10px;
width:100%;
background-color: grey;
content: "";
clear: both;
}
With that you can remove <div id="bottomGrey"></div> and <div class="clr"></div> from your HTML structure, and get the grey border and clearing at the same time.
Give it a background color, 100% width and some content. Also Assuming the clr class is a clear fix implementation. Put it be for the bottom grey div. So contact copy will have a proper height, and bottom grey will sit bellow both floated divs. No need for the absolute position.
I want use three div to create a round effect,like
<div class="wrapper">
<div class="left-corner"></div>
<div class="center-repeat"></div>
<div class="right-corner"></div>
</div>
the .left-corner and .right-corner have a only corner background image
css:
.wrapper
{
width:100%
height:110px;
}
.left-corner
{
background:...
width:110px;
height:110px;
float:left
}
.right-corner
{
background:...
width:110px;
height:110px;
float:right
}
but how should I render the middle div
I tried use width:100% but the corner div will be push and become another row
how can I set the three div in a line and look normal?
If your wrapper is set in percentages, then I would think it best to keep it's children in percentages as well, perhaps use a 33%, 33% and 34% to get the 100%. For the middle, or center-repeat I think you may need to use float: left as well, so it snugs up to the left-corner.
Have you tried using border-radius property?
You can just use the center div and border radius any other corner.
https://developer.mozilla.org/en/CSS/border-radius
Support for "border-radius" in IE
<div class="wrapper">
... content inside wrapper ...
</div>
.wrapper
{
width: 100%;
height: 110px;
border-radius: 5px;
}
Hi i thing you should this
Css
.wrapper
{
width:100%
height:110px;
overflow:hidden;
border:solid 5px black;
border-radius:25px;
}
.left-corner
{
background:red;
width:110px;
height:110px;
float:left
}
.right-corner
{
background:green;
width:110px;
height:110px;
float:right
}
.center-corner{
width:100%;
background:yellow;
height:110px;
}
HTML
<div class="wrapper">
<div class="left-corner">Left</div>
<div class="right-corner">Right</div>
<div class="center-corner">Center</div>
</div>
Live demo http://jsfiddle.net/pTxrW/
Here's my try: jsfiddle.
Left and right corners are 10px less height than center block so it's easier to see borders between them.