This question already has answers here:
What is the best way to clear the CSS style "float"?
(14 answers)
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 4 years ago.
I have this in my css file and html file.
.prodhome-boxshadow{
padding: 10px;
box-shadow: 5px 10px 18px #888888;
}
.prodhome-category {
width:22%;
float:left;
margin:0 1.65% 3.55%;
}
.prodhome-category img {
max-width:60%;
height:auto;
margin:0 5%;
align-content: center;
}
<div class="prodhome-boxshadow">
<div class="prodhome-category">
<h1>Product-title</h1>
<img src="" />
</div>
</div>
<div class="clearrow"></div>
what I get is the box shadow does not encompass the product title and image. Instead I get the box shadow display above where the products are and ends before the Producttiles are displayed. How can I accomplish this?
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Center flex items with one at the end of the row [duplicate]
(3 answers)
Closed 3 years ago.
I have a div that contains two divs inside. First div has to be aligned to the left , second div has to be
aligned to the center relatively parent div.Please could you help me .Here is my jsfiddle : https://jsfiddle.net/armakarma/zy3L9a7h/
html
<div class='test'>
<div class='logo'>logo</div>
<div class='title'> title </div>
</div>
css
.test{
display:flex;
border:1px solid black;
}
.title{
margin: 0 auto;
}
.logo{
width:160px;
border:1px solid red;
}
This question already has answers here:
How do I uncollapse a margin? [duplicate]
(5 answers)
Closed 4 years ago.
How can I disable margin collapse and get 200px margin without changing the HTML?
code:
<style>
div{
font-size: 100px;
border: 10px solid black;
padding: 20px;
margin: 100px;
</style>
<body>
<div>AAAA</div>
<div>AAAA</div>
</body>
Thanks, :D.
Try adding a padding of 0.1px to the body tag, or any parent tag that will include these 2 divs.
This old trick used to disable collision for most cases.
You may want to see an explanation and other solutions here:
How to disable margin-collapsing?
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
So.. my problem is:
I try to align a div to center vertically but doesn't work.. Tried with flex-box, text align, with 2 divs ,etc..
# html
<div class="center">
<div class="lol">
<h1 id="textual"></h1>
<h1 id="author"></h1>
<input type="submit" value="Click Me" id="cheese" class="button">
<button type="submit" id="bttn">Submit</div>
</div>
</div>
# css
.lol {
max-width: 700px;
min-width: 700px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
background-color: white;
overflow: hidden;
border: 1px white solid;
border-radius: 5px;
margin: 0 auto;
}
Do you know guys what's the problem? I used some script, just to get JSON API but i don't think that affects..
Thanks in advance.
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 8 years ago.
What is the easiest way to center a whole table in the middle of a page with HTML?
Use the following CSS:
table {
margin: 0 auto;
}
You cannot do it only with HTML.
<center> is only element that can do it, but is not preferred and is deprecated.
So you can use CSS for this.
just put the parent element's position to be relative and set horizontal margins of this element to be auto.
example :
<div id="parent">
<table>
....
</table>
</div>
#parent {
position: relative;
}
table {
margin: 0px auto;
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 9 years ago.
I'm trying to horizontally center a div-block containing images (playing cards placed there by Javascript), but somehow it doesn't work (images are still left-aligned). Here's the HTML:
<div id="dealerarea">
<div id="dealercards">
<!--Images by Javascript-->
</div>
</div>
And here's the CSS:
#dealerarea{
position:absolute;
width:100%;
height:96px;
top:15px;
}
#dealercards{
display: block;
margin-left: auto;
margin-right: auto;
}
What i'm doing wrong? Thanks in advance!
Edit: I can't give a fixed "width" to inner div, because it changes every time (depending on the number of card images).
You need to give your #dealercards a width and margin:0 auto ;
#dealercards
{
display: block;
margin:0 auto;width:200px;
}
DEMO HERE