On my page I have div structure like this.
-On body there are 2 divs. First 20% width, second 80% width.
-In first div there are 3 divs alongside. First floats left: 11px width, Third floats right: 22px width. I wanna place 2nd div between 1st and 3rd divs covers 100% of the remaining width.
I cannot make the 2nd div like this. How can I do it?
Write like this:
HTML
<div class="firstdiv">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
<div class="secdiv">80%</div>
CSS
.firstdiv{
width:20%;
float:left;
background:red;
}
.secdiv{
overflow:hidden;
background:green;
}
.first{
float:left;
width:11px;
background:yellow;
}
.third{
float:right;
width:22px;
background:pink;
}
.second{
overflow:hidden;
background:blue;
}
Check this fiddle
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 3 divs vertically. The first should have 100% width, the second should have an image with width 283px, and third div should have 100% width.
Does anyone know how to position the image div in the middle of two others divs 100%?
I've tried this, but dont works for me
<div class="content">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
.first{
width:100%;
float:left;
background:yellow;
}
.third{
width:100%
float:right;
background:pink;
}
.second{
width:283px;
overflow:hidden;
background:blue;
}enter code here
If your intention is to position the divs next to each other horizontally than you can't have any of them set to a width of 100% as the total of all elements next to each other can only total 100%.
If your website will be fixed width than your easiest solution would be to set the width of the left and right div in pixels to the (width of the site - 283) / 2. Then they would float next to each other. You could also do this with %.
However if your site is fluid width, then you would need to work out a percentage for all 3 divs i.e 33% each but this would mean the middle won't be exactly 283px.
The only way I can think to make this work exactly as you want would be to use Javascript to resize the elements after the page load which could then get the browser dimensions and work it all out.
Having read it a few times i think i get what you want to do.
You want he middle div to be centred between the two other divs.
you need to give the div a class something like this:
.middlediv
{
width: 283px;
margin-left: auto;
margin-right: auto;
}
which can also be written like this:
.middlediv
{
width: 283px;
margin: 0px auto;
}
Your question isn't clear, so I've done both possible interpretations: http://jsfiddle.net/EbBzY/
HTML
<h1>Option 1</h1>
<div class="main">
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</div>
<h1>Option 2</h1>
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
CSS
.main{
display:table;
width:100%;
margin-bottom:100px;
}
.main .content{
display:table-row;
}
.main .content div{
display:table-cell;
}
.first{
background:yellow;
}
.third{
background:pink;
}
.second{
background:blue;
width:283px;
margin:auto;
}
I'm trying to create a div that will expand to the bottom of its container. The layout consists of two columns within a parent container. The width of both columns is a percentage, and the height of the parent container and the left column expands based on a slideshow in the left column. I'd like the height of the right column to match the left, so I can position something at the bottom. I've tried many different things, but to no avail. Here is the page:
http://whub30.webhostinghub.com/~scottl9/testindex2.html
The html is
<div id="content_section">
<div class="imgwrap">
<div class="imgwrap2">
Left-column content
</div>
<div class="playersection">
Right-column content
</div>
</div>
<div class="clearall"></div>
</div>
and the corresponding CSS is
#content_section { position:relative; min-height:400px; min-width:600px; max-height: 1000px; max-width:2000px;}
.imgwrap {position:relative; width:100%; height:auto; min-width:409px; min-height:230px; border-style:solid; border-width:medium; display: inline-block;}
.imgwrap2 {position:relative; float:left; width:70%; height:auto;}
.playersection {border-style:solid; width:30%; position: relative; float: right; border-width:medium;}
.clearall {clear:both;}`
(I added borders so I could see the divs.)
Any help would be greatly appreciated!
Try changing the height of Right Column to 100%.
.imgwrap2 {position:relative; float:left; width:70%; height:100%;}
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.