This question already has answers here:
Display a div width 100% with margins
(6 answers)
100% width minus margin and padding [duplicate]
(6 answers)
Closed 2 years ago.
I want a margin of 5px in between my three columns of images, but every time I add the margin, the third column goes down below the first two. I've tried decreasing the width of the columns to 30%, but then they aren't perfectly in the middle. How can I solve this?
html:
<div class="rows">
<div class="column">
<img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
</div>
<div class="column">
<img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
</div>
<div class="column">
<img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
</div>
</div>
css:
.rows {
margin-top: 30px;
}
.column {
float: left;
width: 33.33%;
margin: 5px;
}
.column img {
width: 100%;
}
try with calc() like
.column {
float: left;
width: calc(33.33% - 10px);
margin: 5px;
}
Related
This question already has answers here:
Avoid an image to go outside a div?
(7 answers)
How do I stop an image displaying outside of the div
(6 answers)
Closed 8 months ago.
I have an issue with my images (svg, jpg,...., all formats). For instance if I want to make a header and set in CSS the header height for instance like this:
.container {
width: 1024px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
}
header {
height: 300px;
display: flex;
align-items: center;
}
<div class="container">
<header>
<div>
<img src="https://via.placeholder.com/400/09f/fff.png" alt="" />
</div>
<nav>
</nav>
</header>
</div>
The image extends over the borders. How can I tackle that issue?
If the image needs to nested within div that themselves are nested within the constricting parent, you'll need to specify the size on those also.
.container{
height: 300px;
width: 1000px;
margin: 0 auto;
border: 3px solid red;
}
.container header, .container div{
height: 100%;
}
img{
height: 100%;
width: auto;
}
<div class="container">
<header>
<div>
<img src="https://via.placeholder.com/500" alt="">
</div>
</header>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have 4 images in a container. When I set the images to occupy 50% of the container, 2 stacks on top and 2 stacks on the bottom and it perfectly matches the edge on the container like I want. The problem occurs when I add margin. The images stack in one line meaning the margin made in too big for the container so they stack in one line
So I begin experimenting with decimals
I made the width of the images 49.5% and I set margin-right to 0.5%. The problem is the images on the right don't align with the container edge perfectly. There is still space on the edge and I cant add any more margin or width or else it stacks in one line because I am over 50%. Look at the blue part in the image.
My question I guess is how do I get the images to fit my container accurately. am I using the wrong units?
Picture of what I am talking about
.section1{
width: 100%;
height: 95vh;
background-color:;
}
.section1 .wrapper{
width: 94%;
height: 600px;
background-color: royalblue;
}
.section1 .card{
float: left;
width: 49.47%;
height: 300px;
margin-right: 0.53%;
color:white;
}
.pizza{
background: url(./img/main\ 1.jpg)no-repeat;
width:100%;
height: 100%
}
.burger{
background: url(./img/main\ 2.jpg)no-repeat;
width: 100%;
height:100%;
}
.pasta{
background: url(./img/main\ 3.jpg)no-repeat;
width: 100%;
height: 100%
}
.salad{
background: url(./img/main\ 4.jpg)no-repeat;
width:100%;
height: 100%;
}
<div class="section1">
<div class="wrapper">
<div class="card">
<div class="pizza">
<div class="itembox1">
<h1>PIZZA</h1>
</div>
</div>
</div>
<div class="card">
<div class="burger">
<div class="itembox1">
<h1>BURGERS</h1>
</div>
</div>
</div>
<div class="card">
<div class="pasta">
<div class="itembox1">
<h1>PASTA</h1>
</div>
</div>
</div>
<div class="card">
<div class="salad">
<div class="itembox1">
<h1>SALAD & FIT</h1>
</div>
</div>
</div>
</div>
</div>
You could use the :nth-child selector to only put the margin on the images that are first in the row. Example:
#image-wrapper *:nth-child(odd) {
margin-right: 10px;
}
#image-wrapper > * { /* Select all direct children of image-wrapper */
display: inline-block;
width: calc((100% - 10px) / 2); /* set image width to the half of (the parent #image-wrapper minus the margin) */
vertical-align: middle; /* to get rid of the extra vertical spacing */
}
#image-wrapper {
background-color: blue;
}
<div id="image-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en">
</div>
Sorry for the unformatted HTML, but if i would format it correctly the browser would add some extra space inbetween the images; you can read about how to have the HTML indented correctly while having no extra spaces here
If i'm reading it correctly change this part to 100%.
.section1 .wrapper{
width: 100%;
height: 600px;
background-color: royalblue;
}
Add this to your CSS-Code:
* {
margin: 0;
padding: 0;
}
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
With Bootstrap or W3 it is easy but in this application I don't want to use that to make the columns. How do I handle the columns issue withe pure css?
I need to do something like this:
I repeat... Whithout using bootstrap, w3 or any other css framework, how do I make this.
This is my simple HTML code:
<div style="width: 50px; float: left">
<< Prev
</div>
<div style="float: left">
<h1>Some Info... this is the responsive div. Always the rest of the size extracting the 50px of the other divs</h1>
</div>
<div style="width: 50px; float: left">
Next >>
</div>
You can use flexbox:
.container {
display: flex;
height: 200px;
}
.side {
width: 50px;
height: 100%;
background: purple;
}
.middle {
flex-grow: 1;
background: blue;
}
<div class="container">
<div class="side"></div>
<div class="middle"></div>
<div class="side"></div>
</div>
This question already has answers here:
Align two inline-block div with content
(2 answers)
Closed 7 years ago.
Desired result: The two divs with class inline should be on the same horizontal level (the second one contains two other divs with some content).
However, as can be seen below, the two divs are not aligned vertically. If I remove the content (the word "text") from both the .inside divs, they line up as expected.
How can I make them line up? What is causing this?
.inline,
.inside {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
.inline {
display: inline-block;
background-color: chartreuse;
}
.inside {
height: 48px;
background-color: salmon;
border: solid 1px black;
}
<div class="inline">
</div>
<div class="inline">
<div class="inside">text</div>
<div class="inside">text</div>
</div>
<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>
<div class="inline">
<div class="inside"></div>
<div class="inside"></div>
</div>
.inline {
vertical-align: top;
}
Thanks everybody.
This question already has answers here:
Why is the parent div height zero when it has floated children
(4 answers)
Closed 8 years ago.
I have the following code that displays 5 images horizontally across the screen, but for some reason I can not get the Div "block-before-description" to have a height, in FireBug the height is 0 but the 20px margin does show. I have tried many things including floating, display:block, position absolute/relative, and looked at previous questions to no avail. If I remove the images leaving only the heading then the block shows height to cover the headings.
<style type ="text/css">
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px; }
.col-md-2 {
float: left;
width: 16.66667%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.feat-icons {
text-align: center;
}
.block-before-description {
margin-bottom: 20px;
padding: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="block-before-description">
<div class="col-md-2 feat-icons">
<img src="icons/30-Days-Support.jpg" width="105" height="105" alt=""/>
<h4>Support</h4>
</div>
<div class="col-md-2 feat-icons">
<img src="icons/Design-Icon.jpg" width="105" height="105" alt=""/>
<h4>Premium Design</h4>
</div>
<div class="col-md-2 feat-icons">
<img src="icons/Features.jpg" width="105" height="105" alt=""/>
<h4>Features</h4>
</div>
<div class="col-md-2 feat-icons">
<img src="icons/Guide-Icon.jpg" width="105" height="105" alt=""/>
<h4>Gudie Included</h4>
</div>
<div class="col-md-2 feat-icons">
<img src="icons/Mobile-Icon.jpg" width="105" height="105" alt=""/>
<h4>Mobile Supported</h4>
</div>
</div>
</div>
</body>
</html>
Any help on the issue would be appreciated.
This is the classic issue caused by all the containers children floating. The height of the parent is not calculated as the children are removed from the normal flow of the document.
The following examples do not take into account Bootstraps ready made solutions as you have not mentioned bootstrap in your question.
One option is to simply apply the overflow property to the parent:
Example with overflow and floats.
.block-before-description {
margin-bottom: 20px;
padding: 0px;
background: #F00;
overflow: hidden;
}
Another option is to not use a float at all and use display: inline-block to display your images on the one horizontal line.
Example with inline-block
.col-md-2 {
display: inline-block;
vertical-align: top; /* use middle, top or bottom to keep an even alignment */
width: 16.66667%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}