when i use float left in my inner divs they pushes down . i used clear:both bt not working. what to do??? it is also not possible using position absolute. i didnt face this kind of problem with float: left or float:right
css code:
.product-list{
min-height:10px;
background-color:white;
position:relative;
top:35px;
padding:3px;
margin:0;
background-color:red;
}
.product-list-div{
padding:0px;
min-height:40px;
background-color:navy;
}
.product-image-div{
width: 50px;
background-color: black;
height: 20px;
position: relative;
padding: 0;
margin: 0;
float: left;
}
.product-details-div{
width:200px;
background-color: lime;
height: 10px;
position: relative;
padding: 0;
margin: 0;
float: left;
}
html code:
<div class="product-list">
<div class="product-list">
<div class="product-list-div">
<div class="product-image-div"></div>
<div class="product-details-div"></div>
</div>
</div>
Remove extra product-list div from your code. And also clear the floated divs, I have added overflow: hidden to product-list-div
<div class="product-list">
<div class="product-list-div">
<div class="product-image-div"></div>
<div class="product-details-div"></div>
</div>
</div>
product-list{
min-height:10px;
background-color:white;
position:relative;
top:35px;
padding:3px;
margin:0;
background-color:red;
}
.product-list-div{
padding:0px;
min-height:40px;
background-color:navy;
overflow: hidden;
}
.product-image-div{
width: 50px;
background-color: black;
height: 20px;
position: relative;
padding: 0;
margin: 0;
float: left;
}
.product-details-div{
width:200px;
background-color: lime;
height: 10px;
position: relative;
padding: 0;
margin: 0;
float: left;
}
Check this Demo
Related
I'm a beginner to Html & CSS and have a probably really simple question, but I just can't seem to find the answer: How could you span an html element(child div, text, etc.) across multiple divs using only CSS & Html(no Javascript/JS)? I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 0 auto;
width:300px;
padding-top:50px;
}
.colorone{
background:#FFEB3B;
width:150px;
height: 150px;
float:left;
}
.colortwo{
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
}
<html>
<head></head>
<body>
<div id="container">
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
Desired result:
The blue div/rectangle should also be able to span more than two parent divs if wanted.
I've searched and researched online & on StackOverflow but I still can't seem to find the answer. Any help would be greatly appreciated.
Here's a quick example using your code with a few changes. I added the position to the container and the 3rd element and set the z-index to 2 on the div with the class of .colorthree.
var width = 0,
container = $('#container');
container.children('div').each(function(){
if(!$(this).hasClass('colorthree')) {
width += $(this).width();
}
});
container.width(width);
$('.colorthree').width(width-20);
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 20px auto;
width:300px;
height: 150px;
position:relative;
white-space: nowrap;
}
.colorone, .colortwo, .colorfour {
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
float:left;
}
.colorone{
background:#FFEB3B;
}
.colorfour {
background: red;
}
.colorthree {
z-index: 2;
top: 20px;
left: 10px;
position: absolute;
width:90%;
height: 40px;
background:blue;
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="colorone"><b>1</b></div>
<div class="colortwo"><b>2</b></div>
<div class="colorfour"><b>4</b></div>
<div class="colorthree"><b>3</b></div>
</div>
You can do that with position: absolute
No javascript needed, only with html and css
html,
body {
left: 0;
margin: 0;
background: white;
height: 100%;
}
b {
font-family: calibri;
padding-left: 10px;
}
#container {
margin: 0 auto;
width: 300px;
padding-top: 50px;
position: relative;
}
.colorone {
background: #FFEB3B;
width: 150px;
height: 150px;
float: left;
}
.colortwo {
width: 150px;
height: 150px;
background: #8BC34A;
overflow: hidden;
}
.colorthree {
background-color: blue;
display: block;
position: absolute;
width: calc(100% - 50px);
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
left: 0;
right: 0;
color: white;
text-align: center;
line-height: 50px;
}
<html>
<head></head>
<body>
<div id="container">
<span class="colorthree">I'm Span!</span>
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
I've created a large div-container that can contain multiple items (div's),
like that:
But, as you can see, there is an unwanted white gap at the bottom and to the right of each item and I don't know where this is coming from.
The items should be scrollable if they not fit into the Container (horizontally)
HTML:
<div class="maincontainer">
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
</div>
CSS:
.maincontainer {
width: 90%;
min-height: 200px;
margin: auto;
border: 1px solid black;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: #444444;
margin: 0;
padding: 0;
}
.box{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:100px;
width:180px;
background-color:#666666;
}
.box2{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:80px;
width:160px;
background-color:#fff;
}
I've also made a Plunker
Any help appreciated! Thanks
I found a solution. Setting the maincontainer's font size to 0 does it! Googled removing whitespaces in css and found:
this
By default, your divs are block elements, however, you changed them to inline elements. Inline elements have a whitespace. That is why there is a gap between your two elements.
You can change the maincontainer display to flex like so:
.maincontainer {
width: 90%;
display:flex;
min-height: 200px;
margin: auto;
border: 1px solid black;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: #444444;
margin: 0;
padding: 0;
}
.box{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:100px;
width:180px;
background-color:#666666;
}
.box2{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:80px;
width:160px;
background-color:#fff;
}
That should be it! :)
I am trying to place a box along side each image on my webpage that will scroll down with the page but only inside the confines of the post/image, like can be found at memecenter, but i am having some difficulties.
I have set the parent div (post) to position relative and the child div (scrolling box) to position absolute, and they are nested within each other in the html but the child div wont scroll it still stays static on the page.
See code here:
.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
}
and html:
<div class="parent">
<div class="child">
</div>
</div>
You can use "top" and "left" values.
Css Part:
.parent {
position.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
left: 100px;
top: 10px;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
float: left;
}:
Html part:
<div class="parent">
<img src="img.png" width="100px">
<div class="child">This is image description</div>
</div>
Css :
.parent
{
background-color:Blue;
position:fixed;
width: 150px;
height:200px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow:hidden;
}
.child {
background-color:red;
position: absolute;
width: 460px;
height: 220px;
float: right;
margin-left:150px;
overflow:scroll;
}
and html:
<div class="parent">
</div>
<div class="child">
</div>
Please find a working fiddle.
http://jsfiddle.net/Victor_AJ/8GS7b/13/
CSS :
.parent {
background-color:Blue;
position:fixed;
width: 70%;
height:100%;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow-y:scroll;
overflow-x:hidden;
}
.child {
background-color:Grey;
position: absolute;
width: 30%;
height:100%;
float: right;
margin-left:70%;
overflow:hidden;
}
And Html :
<div class="parent">
</div>
<div class="child">
</div>
Find a Fiddle Here Working EX
Hi I would like center correctly my content inside the container but I don't know how to do this. I have tried text-align : center.
How can I do this ?
HTML
<div id="Contacts" data-bind="foreach: viewModel.contacts()">
<div class="title">
<div class="container">
<small> <span class="red"> NEW CONTACT</span> </small>
<br>
<br>
</div>
</div>
</div>
CSS
.container {
width: 940px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
.title {
width: 540px;
height : 30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
position: absolute;
}
no centering
Centered version (approximative) what I would like :
Add line-height:30px; to .title class.
.container {
width: 940px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
.title {
width: 540px;
height : 30px;
line-height : 30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
position: absolute;
}
Jsfiddle: http://jsfiddle.net//vU73t/
.centerMe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
/* dimensions */
}
Here is corrected css and HTML with Fiddle link.
HTML
<div id="Contacts">
<div class="container">
<div class="title">
Demo Text goes here <br>
</div>
</div>
</div>
CSS
*{
padding:0;
margin:0;
}
.container {
width: 940px;
margin:0 auto;
zoom: 1;
background-color:#ffb7b7;
padding:20px;
text-align:center;
}
.title {
width:540px;
height:30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
margin:0 auto;
/*position: absolute;*/
}
I have a div nested inside another
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
THE CSS is as
#wrapper{
width:800px;
}
#left{
float:left;
width: 200px;
}
#right{
float: left;
width: 600px;
}
#footer{
width:800px;
height: 20px;
}
How can i ensure that the footer stays at the bottom of the wrapper div?
http://jsfiddle.net/LMeZ9/
just use clear:both
#footer{
width:800px;
height: 20px;
clear:both
}
You can solve this by using positioning:
#wrapper{
width:800px;
height: 600px;
position: relative;
border: 1px solid #333;
}
#left{
float:left;
width: 200px;
}
#right{
float: left;
width: 600px;
}
#footer{
width:800px;
height: 20px;
position: absolute;
bottom: 0;
}
Demo here.