I try to outline the div tag. I used border:0.01em solid black but it is not correctly fit.
My script below
<html>
<body>
<div id="color" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; background:yellow; float:left;"></div>
<div style="width:50%; height:500px; background:blue; float:left;"> </div>
</div>
<div id="border" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; border:0.01em solid black; float:left;"></div>
<div style="width:50%; height:500px; border:0.01em solid black; float:left;"></div>
</div>
</body>
</html>
That equal sepration of the div id = color tag is fit into the 100% width.
But equal sepration of the div id = border tag is not fit into the 100%
because i added the border to seprate div tags, so size is increase like 50% + 0.01em.
That the reason div id = border tag's sub div tag is not fit into the 100%, so the second sub div tag is fall in down from 100%.
So i want to outline
the div tag not to border it? How can i do it? But i want to seprate by the 50% i not decrese it.
Under the standard box-model padding and borders are added to any defined width.
If you set the box-sizing to border-box then the declared width will include any padding & borders.
It's often seen as part of a Universal Selector:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="border" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; border:1px solid black; float:left;"></div>
<div style="width:50%; height:500px; border:1px solid black; float:left;"></div>
</div>
This is actually the purpose of the outline property:
<div id="border" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; outline:0.01em solid black; float:left;"></div>
<div style="width:50%; height:500px; outline:0.01em solid black; float:left;"></div>
</div>
Please try the below code:
<div id="color" style="width:100%; height:500px; background:gray;border:medium solid">
<div style="border-right: medium solid; float:left;width:50%; height:500px;"></div>
This should work with your case.
try
<div style="border-style: solid;border-width: medium; float:left;width:50%; height:500px;"></div>
Related
<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
<div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
<div class="title_1" style="width: 70%;display:inline-block;border-right:solid 1px #ccc;font-size:12px;">
left box
</div>
<div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
right-box
</div>
</div>
</div>
I have a parent div with width:100% and i want to divide it into two child div with width:70% and width:30% then make it inline. But why my right goes down?
Use a CSS Reset or set a proper box-sizing property.
* {
box-sizing: border-box;
}
<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
<div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
<div class="title_1" style="width: 70%;display:inline-block;border-right:solid 1px #ccc;font-size:12px;">
left box
</div>
<div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
right-box
</div>
</div>
</div>
Read more about Normalize and CSS-reset
Stack overflow
The issue is border-right in class .title_1 if you remove that it align both divs properly and if you want to keep that then use box-sizing:border-box or else reduce the width of .title_1
Remove border-right
<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
<div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
<div class="title_1" style="width: 70%;display:inline-block; #ccc;font-size:12px;">
left box
</div>
<div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
right-box
</div>
</div>
</div>
Reduce width
<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
<div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
<div class="title_1" style="width: 68%;display:inline-block;border-right:solid 1px; #ccc;font-size:12px;">
left box
</div>
<div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
right-box
</div>
</div>
</div>
How can I get a div with overflow: scroll; or overflow: auto; to scroll multiple contained divs?
If I have a single div, with a single child div, and the child div is wider than the container, then overflow:scroll; works great.
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
div.inner2 {
width: 300px;
float: left;
}
<div class="container">
<div class="inner2">
ABCD1234WXYZ ABCD1234WXYZ
</div>
</div>
But if I have multiple inner floated divs, where each one is less than the width of the container, but in sum they are greater than the container, it wraps the floated divs.
div.inner {
width: 100px;
float: left;
}
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
div.container:after {
clear: both;
}
<div class="wrapper">
<div class="inner">ABCD</div>
<div class="inner">1234</div>
<div class="inner">WXYZ</div>
</div>
How do I get it to append the floating divs horizontally and scroll?
jsfiddle here: http://jsfiddle.net/hw4ykza6/
Note that the contained divs will be resized at various times. I do not know in advance what the max or min width for them will be, only what they are now.
I think i've achieved what you want here (note i only applied my changes to your top example):
JSFIDDLE
The key things to note are:
I've added an inner wrapping element with class="inner-container" that is display:table-row
The elements of class inner now have display:table-cell
You don't need floats there. div.inner {display: table-cell;} will give you what you want:
div.inner {
width: 100px;
display: table-cell;
}
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
<div class="wrapper">
<div class="inner">ABCD</div>
<div class="inner">1234</div>
<div class="inner">WXYZ</div>
</div>
You can also use a dispaly: inline-block; style and apply that style to all the child divs
e.g
<div style="width:300px; overflow-x:scroll; height:auto;">
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
</div>
Note:am using inline styling for explanatory purposes
You could try coding with less so you can get your heights as a single variable so u can then use later
The container div has a fixed width of 540px min-height of 200px.
i want to put another div on the bottom right corner of that div...
how should i do that
<div style="width:540px; min-height:200px;" class="container">
<div style="position:absolute; bottom:0; right:0;" class="block">
</div>
</div>
Try this:
<div style="width:540px; min-height:200px; position:relative;" class="container">
<div style="position:absolute; bottom:0; right:0;" class="block">
</div>
</div>
you should add a position:relative; in the .container
The following works (for demo purposes):
<div style="width:540px; min-height:200px; position:relative; border: 1px solid red;" class="container">
<div style="width: 50px; height: 50px; position:absolute; bottom:0; right:0; border: 1px solid blue;" class="block">
</div>
</div>
See this JSFiddle
You can always separate the CSS into "container" and "block" classes.
<div style="width:540px; min-height:200px; position:relative; border: 1px solid red;" class="container">
<div style="width: 50px; height: 50px; position:absolute; bottom:0; border: 1px solid blue; margin-left : 480px;" class="block">
</div>
</div>
This would also help you. Specify the size of block div and subtract its size from container div and keep the result in margin-left.
I have an image that is 500px wide. It is inside of a div. The width of the div is 250px. How can I align the image centered inside of the div? Should I use top or left or should I have negative margins?
I would use negative margins: #myDiv img { margin: 0 -125px; }. This only works if you know the width of both the DIV and the IMG though.
Can you change (or at least add) something in the html around the image? This is kind of an old trick, and is a little awkward in that it requires you to add an extra <div> around the image, but it works quite nicely if you're ok with that (Note, added some borders to make the effect easily visible while testing):
<div style="width:250px; border: solid 2px red;">
<!-- Place the following div at 50%: -->
<div style="width: 500px; margin-left:50%; border: solid 2px blue;">
<!-- ...then move the image back by half of it's own width: -->
<img style="width:500px; margin-left:-250px; border: solid 3px green;" />
</div>
</div>
Demo
Hey now used to display table-cell properties as like this
<div class="parent">
<img src="http://www.gravatar.com/avatar/3c6597370b476903ed475f70b4b3ce31?s=32&d=identicon&r=PG">
</div>
Css
.parent{
border:solid 1px red;
display:table-cell;
width:300px;
height:300px;
vertical-align:middle;
text-align:center;
}
.parent img{
vertical-align:top;
}
Demo
try this one (not sure about ie-6 but work fine in ie-7 and plus)
<style>
.test{ height:250px; width:250px; overflow:hidden; position:relative;}
.test img{ position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-250px; height:500px; width:500px;}
</style>
<body>
<div class="test"><img src="img.png" alt="img" /></div>
</body>
if is it possible to use that image as background you can try this one
.test{height:250px; width:250px; background:url(img-path.png) no-repeat 50% 50%;}
Here is my html code looks alike.
<div style="width:70%; margin:0px auto; border:1px solid #000;">
<div style="float:left; width:100px; border:1px solid #000;">Test</div>
<div style="float:left; border:1px solid #000;">Test</div>
</div>
The output result looks like this.
http://imm.io/7PWG
As you can see, the wrapper div is at the center of the browser but two of the inner div are on the left side. I want them to be in the center of the wrapper div.
Any ways to do it ? Please help me out. Thanks.
display: inline-block can do this in a reasonably simple way:
<div style="width:70%; margin:0px auto; border:1px solid #000; overflow:hidden; text-align:center">
<div style="display:inline-block; vertical-align:top; text-align:left">
<div style="float:left; width:100px; border:1px solid #000;">Test</div>
<div style="float:left; border:1px solid #000;">Test</div>
</div>
</div>
See: http://jsfiddle.net/LJaDd/
I wrapped a new div around your inner two divs, and gave it display: inline-block.
I added text-align: center to the outer div to center the wrapper div, then added text-align: left to the wrapper div to align the text inside back to the left.
I added overflow: hidden to the outer div so that it contains the floated divs.
I think this will be helpful: http://www.pmob.co.uk/pob/centred-float.htm
try this ...
<div style="width:70%; margin:0px auto; border:1px solid #000; background-color: yellow;">
<div>
<div style="float:left;width:100px; border:1px solid #000;">Test</div>
<div style="float:left;border:1px solid #000;">Test</div>
</div>
</div>
the float:left was causing your inner 2 divs to go all the way to the left and not be centered. By putting those inside another div that fixes it.
here it is in action ... http://jsfiddle.net/sixgun/mp3T2/