I have one container div, which contains 3 divs inside it.
When i write border:1px solid red for container div, border is shown only on top of these 3 child divs, but not around them.
Below is css code.
#cont {
width:800px;
margin-right:auto;
margin-left:auto;
border:1px dashed red;
padding:2px;
}
#third, #second, #first {
width:260px;
float:left;
margin:2px;
}
Html code:
![<div id="cont">
<div id="third"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>
<div id="second"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>
<div id="third"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>
</div>][1]
add overflow:hidden;
#cont {width:800px;margin-right:auto;margin-left:auto; border:1px dashed red;padding:2px; overflow:hidden;}
<div style="clear:both;float:none;"></div> well solve your problem. added it under the div's
add overflow:hidden to the #cont element
Related
Hi guys i need your help, i am trying this alternating image and text design:
And I'm coding this in bootstrap, here's my code:
<div class="container">
<div class="row">
<div class="col-2"><img src="images/image.png" class="img1 img-responsive"></div>
<div class="col-10"><h4 class="details blue right">Lorem Ipsum text here...</h4></div>
</div>
<div class="row">
<div class="col-10"><h4 class="details green left">Lorem Ipsum text here...</h4></div>
<div class="col-2"><img src="images/image.png" class="img2 img-responsive"></div>
</div>
<div class="row">
<div class="col-2"><img src="images/image.png" class="img3 img-responsive"></div>
<div class="col-10"><h4 class="details orange right">Lorem Ipsum text here...</h4></div>
</div>
</div>
and my CSS:
.container{
max-width:960px;
}
.details.left:before{
content:"";
position:absolute;
height:100%;
background:inherit;
width:100%;
top:0;
left:0;
z-index:0;
overflow:hidden;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
My problem is the width of the text background is overflowing the screen width and it creates a horizontal scroll, how do i clip the background so i won't have the scroll? i only want the background to overlap the center container not the screen width.
My problem is the width of the text background is overflowing the
screen width and it creates a horizontal scroll, how do i clip the
background so i won't have the scroll?
Wrap your container in an outer wrapper and give it overflow: hidden and give your html and body a zero margin
HTML
<div class="wrapper">
<div class="container">
....
</div>
</div>
CSS
html, body {
margin: 0;
}
.wrapper {
overflow: hidden;
}
I applied this to your fiddle demo here, though it look far from you posted screen dump
I want to align the text in the middle (Horizontal & Vertical) of each single box:
HTML:
<div class="piclist"><span>Tag 1</span><div class="overlay"></div><div class="tabpic foto1" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png); display: block;"></div></div>
<div class="piclist"><span>Tag 2</span><div class="overlay"></div><div class="tabpic foto2" style="background-image: url(https://cdn.downdetector.com/static/uploads/c/300/5f7e7/wikipedia-logo_1_1.png); display: block;"></div></div>
<div class="piclist"><span>Tag 3</span><div class="overlay"></div><div class="tabpic foto3" style="background-image: url(https://cdn.downdetector.com/static/uploads/c/300/5f7e7/wikipedia-logo_1_1.png); display: block;"></div></div>
<div class="piclist"><span>Tag 4</span><div class="overlay"></div><div class="tabpic foto4" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png); display: block;"></div></div>
I think there is a problem with the nested divs: https://jsfiddle.net/brL822vb/
The trick I use is Table and Table Cells to use the vertical-align property.
You seem to have a lot of tags inside that element where its not really needed - these are the 3 you need and I think you can make your example work nicely by stripping down.
Put your background image on the Box, the Overlay is your semi transparent layer, and the span is your text.
HTML:
<div class="box">
<div class="box-overlay">
<span>Text</span>
</div>
</div>
CSS:
.box{
width:400px;
height:400px;
border:1px solid red;
}
.box-overlay{
display:table;
height:100%;
background:rgba(0,0,0,0.5);
width:100%;
}
.box-overlay span{
display:table-cell;
vertical-align:middle;
text-align:center;
height:100%;
width:100%;
}
See JSFiddle Here
I have a some div containing an image with a calculated height which enables me to display only part of the image (100%-197px). My problem is that the text under my calculated height div does not appear directly under the image but leaves an empty space.
Here is a jsfiddle
and Here is my code
<style>
#div1 {
left: 300px;
height: calc(100% - 197px);
border: 1px solid black;
background-color: yellow;
float:left;
overflow:hidden;
}
#div1 img{
height:auto;
}
.wrap{
height:100vh;
}
</style>
<div class="wrap">
<div id="div1">
<img src="http://externalapp.websoftghana.com/clean/decoupes/4000.jpg">
</div>
</div>
<p>This text is supposed to appear right under the image but it goes down . How to solve it ?</p>
How to remove the space under a div that has been displayed on a calculated height ?
You can change the source ordering or change the style. As it stood, your <p> tag was being pushed to below the <div class="wrapper"> element.
See codepen below:
http://jsfiddle.net/p8b5sb0t/4/
And code:
<div class="wrap">
<div id="div1">
<img src="http://externalapp.websoftghana.com/clean/decoupes/4000.jpg">
</div>
<p>This text is supposed to appear right under the image but it goes down . How to solve it ?</p>
</div>
I'm placing some text at arbitrary absolute positions inside a wrapper-div on my page. The most natural placement would be to specify the left and top values of the middle of the bottom edge of the element boxes of the text I am placing. My current solution seems complicated with 3 nested divs. Is there an easier way?
<div class="wrapper">
<div class="a">
<div class="b">
<div class="c">TEXT123<br/>TEXT123123</div>
</div>
</div>
<div class="a">↖</div> <!--for illustration only-->
</div>
with
.wrapper {width:300px; height:200px; background-color:yellow;}
.a {position:absolute; left:200px; top:100px;}
.b {position:absolute; bottom:0;}
.c {position:relative; left:-50%; border:solid 1px;}
See: http://jsfiddle.net/TTc23/
See if this works for you :
HTML:
<div class="wrapper">
<div class="c">TEXT123<br/>TEXT123123</div>
</div>
CSS:
.wrapper {width:300px;height:200px;background-color:yellow;display:table-cell; vertical-align:middle; text-align:center}
.c {border:solid 1px;margin:auto; width:100px}
http://jsfiddle.net/zHEXQ/
I have added following additional css properties to "wrapper" div
display:table-cell; vertical-align:middle; text-align:center
changed css for "c" div to :
.c {border:solid 1px;margin:auto; width:100px}
removed divs "a" & "b"
Basically i have:
<div class="wrap">
<div class="sum">
little text
</div>
<div class="content">
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
text
</div>
</div>
<style>
.wrap{
height:100%;
overflow:hidden;
background:green;
}
.sum{
float:left;
height:100%;
background:yellow;
}
.content{
float:left;
height:100%;
background:red;
}
</style>
If you see, the sum div doesn't expand to the remaining height to equal to the content div.
All i want is both divs be in the same height without specifying it.
I totally need a Pure css, and not javascript or table.
Thanks
This might be a better option for you...
http://bonrouge.com/2c-hf-fixed.php
or check out faux columns:
http://www.alistapart.com/articles/fauxcolumns/