I want a border of Div to be less than the width of div. How to implement that in CSS?
Following image will give you more Clarity:
http://imageshack.us/photo/my-images/440/divkr.jpg/
This is not possible with plain CSS.
You could however use two div's to get this effect.
<div class="outer">
<div class="inner">
text
</div>
</div>
.outer
{
background-color:blue;
padding:20px;
width:200px;
}
.inner
{
border:solid 1px white;
height:150px;
color:white;
}
http://jsfiddle.net/RreTH/
http://jsfiddle.net/RreTH/1/
That is not possible.
Border is always the outside of element's box model. However there might be a workaround you would like.
<div>
<div id="inner" style="border:5px #000 solid;">
</div>
</div>
Now, in this example, the border of #inner, will never exceed that of the parent.
As for the demonstration part, check this.
You will notice, the outer div has a thin red line to mark its border, but the inner div's border can act as outer div's inner border.
Hope it helps
Related
how would I go about placing an image vertically between 2 section divs so that I can accomplish the following:
Set the exact width in which the image overlaps the section. Example - I want 30% of the height of the image to be part of the top div and 70% of the height of the image to be on the bottom div
Have consistency on all screen sizes/browsers for the above goal
Here's an example to illustrate what I mean:
From what I've read and seen, a lot of people just set margin to be a negative pixel amount or use top/bottom and set a pixel amount but i dont think this is compatible across screen sizes
thanks a lot for the help, it means a lot
Try this you can insert image in div having id img
#div1{width:400px;height:100px;background:red;}
#div2{position:relative;width:400px;height:100px;background:yellow;z-index:1;}
#image{width:40px;height:40px;background:green;position:relative;
margin-left:180px;margin-top:-20px;margin-bottom:-20px;z-index:2}
<div id="div1"></div>
<div id="image"></div>
<div id="div2"></div>
USING % FOR WIDTH
#div1{position:relative;width:50%;height:100px;background:red;z-index:2;}
#div2{position:relative;width:50%;height:100px;background:yellow;z-index:1;}
#image{position:absolute;bottom:-20%;/* 2/3=66.6 */
left:35%;z-index:4;
width:30%;
height:30%;background:green;
}
<div id="div1"> <div id="image"></div></div>
<div id="div2"></div>
You can add 2 parents around the image element, one with position:relative; and another (nested div) with position:absolute;. then for img tag, apply margin-top:-30%; to place it at desired position.
To center the image: we set left:50% to inner div (parent of image) and set margin-left:-50%; for image as shown here:
#div1 {background: #e0f0e0; padding: 1em;}
#div2 {background: #e0e0f0; padding: 1em;}
#divImg {position:relative; border:1px solid red; }
#divImg2 {position:absolute; border:1px solid blue; left:50% }
#divImg img { margin-left:-50%; margin-top:-30%; }
<div id="div1">Section 1<br/>Contents of div1 ...<br/><br/>123<br/>456<br/></div>
<div id="divImg">
<div id="divImg2">
<img src="http://triptopersia.com/wp-content/uploads/2016/04/Iranian-Cheetah-2.jpg" style="width:150px" />
</div>
</div>
<div id="div2">
Section 2<br/>Contents of div2 ...<br/>
<br/>
ABCD<br/>EFGH<br/>
123<br/>456<br/>
</div>
The red line indicates border of first position:relative div (divImg)
The blue line indicates border of second position:absolute div (divImg2)
The final position of img element is shifted relative to second div by margin-left:-50%; margin-top:-30%;
I have 2 divs, one floating left(#div1) and the other floating right(#div2). I need to add a third div(#div3) which floats centrally over these. I am currently trying to use the z-index. However I am getting some strange effects like the div1 and div2 being forces down. Also the "container" div centrally aligns all child divs.
So for some code:
<div id="container" style="width: 980px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black;position:relative; top:0px, left:auto; z-index:1000">I look like a button and I float the other divs, in a central location</div>
</div>
I would really appreciate some guidance on the correct code for the above, to ensure that #div3 does float over #div1 and #div2, and is centrally located.
Thanks in advance.
First of all, the style attribute on 3rd div isn't closed.
Use ; to separate between style statements in the style attribute. And its color, not colour
I would also suggest using a css
Heres a codepen:
http://codepen.io/Vall3y/pen/QwWPYd
If you want the container to float in the center, its enough to give it margin: auto
Giving the 3rd div a width and auto margin will get your desired result I would assume. I also removed some unnecessary statements like position relative
#div3 {
border:1px solid black;
color:black;
margin: auto;
width: 30%;
}
Heres a codepen:
http://codepen.io/Vall3y/pen/gbOyEb
Also consider using display: flex and ditch the floats altogether
http://codepen.io/Vall3y/pen/ogNOVV
If you want to read more on flexbox I recommend the csstricks article http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think you need to add to #div3 display property: inline-block, and set text-align: center to #container, check it out here
No relative or absolutely positioned elements needed! This should give you what you want:
CSS:
#container{width: 580px; border:2px solid orange; height:350px;}
#div1{border:2px solid blue; width:260px; height:100px; float:left;}
#div2{border:2px solid green; width:260px; float:right; height:100px;}
#div3{border:1px solid black; width:100%; float:left; height:100px;}
HTML:
<div id="container" >
<div id="div3">I look like a button and I float the other divs, in a central location</div>
<div id="div1">Div1</div>
<div id="div2">Div3</div>
</div>
Heres a live demo:
http://jsfiddle.net/Lza5fz43/
You really should separate your CSS and HTML, but this is what I did...
Add width:inherit to your div3 and position:absolute:
<div id="container" style="background-color:lightgrey;width: 480px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black; top:0px, left:auto; z-index:1000; position:absolute; width:inherit;">I look like a button and I float the other divs, in a central location</div>
</div>
You can modify the width to adjust where you want div3 to land and therefore can center it between them if you want.
Working JSFiddle: http://jsfiddle.net/re2hkbgh/1/
If this isn't exactly what you want just play with the width to get the effect you want as this is the positioning you are asking for! :)
I might need a bit of help here, if you see the Fiddle you will understand.
<div class="container">
<div class="a">Green</div>
<div class="b">Yellow</div>
</div>
I want to know if I could reduce the green box width automatically if I increase the content in the yellow box. I want it to be done purely using HTML and CSS. If it's not possible I will work around with it with a script.
Counting on you guys.....
EDIT
The yellow div should not jump down by the addition of content. The green one should be reduced
What I did was to make a fixed right div and a dynamic left div. I do that by floating right the right div but I place it first.
<div class="container">
<div class="b">Yellow Yellow Yellow</div>
<div class="a">Green Green</div>
</div>
Then some simple changes in CSS:
.a {
border:2px solid green;
overflow:hidden;
}
.b {
float:right;
border:2px solid yellow;
}
Now increase the number of "Yellow" and "Green" so you can see the difference, for example:
http://jsfiddle.net/hm0bqsaL/
http://jsfiddle.net/t47ehnv0/
http://jsfiddle.net/0rgohyve/
http://jsfiddle.net/6mcL5e7y/
I'm fairly new to CSS, so, this might look silly:
In CSS, i use the property to float:left to position a content left to the neighbouring element, now, i have a container for all the elements that have the float property. how do i make the parenting element adjust it's height according to it's content?
the HTML:
<div id="page">
<div id="side">
<p>my sidebar</p>
</div>
<div id="content">
<p>my content</p>
<p>my content1</p>
<p>my content2</p>
<p>my content3</p>
</div>
the CSS
/* the "border:3px solid #000;" are used to make the div border visble*/
#page{
position:relative;
width:400px;
background-color: #F4F0EC;
border:3px solid #000;
}
#side{
border:3px solid #000;
float:left;
}
#content{
float:left;
border:3px solid #000;
}
with the above, the <div id="page"> look like it has a height of 0px.... how do i make it warp the content ??
since i'm new to CSS, please explain what am i doing wrong, thanks
Fiddle:http://jsfiddle.net/AuSmP/
You can add overflow:hidden for your div #page which will allow it to resize to fit its contents.
See Working Demo.
Learn more about overflow property.
Alternatively you can also add <div class="clear"></div> and then CSS .clear{clear:both;} to achieve the same.
See Demo.
Changing Position from relative to absolute can also help you out
Check this JSFiddle Demo
Is this what you expected? http://jsfiddle.net/AuSmP/4/
just add float:left style to #page will fix the trick, or you could also use clear:both at the bottom
I have the following layout: nested DIVs, the outer having 100% width and the inner having some fixed width. The inner one is centered using margin:auto.
Now I need to set different backgrounds to the DIVs. Say, the inner should be red and the remaining part of the outer should be green. The problem is that the backgrounds need to be semitransparent (using PNG or CSS3's rgba()). So, the background of the inner DIV does not look red, it becomes brown! Here is my code:
<div id="outer">
<div id="inner"></div>
</div>
and the CSS
#outer{width:100%;height:50px;background:rgba(0,255,0,0.5)}
#inner{width:800px;height:50px;margin:auto;background:rgba(255,0,0,0.5)}
I've tried to use 3 floated DIVs inside the #outer. But I can't set width for the other 2 DIVs to make the #inner to be in the center of the screen. width:auto doesn't work as well.
I know such layout is possible with tables; more precisely with elements that have display:table-cell. So when I add another "outer" DIV, I get the result I need (3 "levels" are required for table-like layout: table, row, cell). CSS:
#outer2{display:table;width:100%}
#outer{height:50px;display:table-row}
#inner{width:800px;height:50px;background:rgba(255,0,0,0.5)}
#left, #right, #inner{display:table-cell}
#left, #right {background:rgba(0,255,0,0.5)}
and the ugly HTML:
<div id="outer2">
<div id="outer">
<div id="left"></div>
<div id="inner"></div>
<div id="right"></div>
</div>
</div>
Is there any other way to put 3 DIVs in a row with such "balance"? Or, maybe, there is a completely different way to solve the original issue? I mean, the problem appeared only because of the transparency! :)
I don't like the solution with display:table, because I've added 3 additional DIVs... Also, please don't suggest any solutions using JS.
If you're feeling edgy and don't mind losing a horizontal scrollbar...
HTML
<section></section>
CSS
body { overflow-x:hidden; }
section {
width:500px;
height:50px;
margin:0 auto;
position:relative;
background:rgba(255,0,0,0.5);
}
section:before, section:after {
top:0;
bottom:0;
content:"";
width:9999px;
position:absolute;
background:rgba(0,255,0,0.5);
}
section:after { left: 100%; }
section:before { right: 100%; }
Demo: http://jsfiddle.net/6STug
Hat-tip, CSS-Tricks
Why don't you use a single background png image on the #outer? The image could contain the semitransparent red then the semitransparent green and again the semitransparent red.