I am trying to get an even spacing between divs inside a div with a set width of max the containing elements and this div is in another div which contains the other two and is set to width 60%.
You can see the 4 divs which are in a bigger div that holds all the 4 divs. The bigger div has a width of 60%. I tried to make a % margin to the right but even at 1% one of the img gets in the next line and I don't want that.
I also tried margin:auto, align-items:center and some other stuff but nothing worked and most of them didn't do anything. Note that I don't want to use any responsive web design things like flexbox!
div order.
.container {
width: 60%;
/*This is the biggest one and contains everything from the side that has to be in the center*/
margin: auto;
}
.container1 {
margin: 15px 15px 15px 0px;
}
.angebotTop {
display: inline-block;
width: max-content;
}
.angebote {
width: 250px;
height: 300px;
float: left;
margin: 10px auto 10px 10px;
}
<h2>Unterkünfte rund um die Welt</h2>
<div class="container1">
<div class="angebotTop">
<div class="angebote">
<img src="Bilder/Airbnb/hotel-2.jpg" alt="">
<p id="angebot">GANZE WOHNUNG ⸱ KOPENHAGEN</p>
<p id="beschreibung">Sonniges Penthouse mit 5 Balkonen</p>
<p id="preis">206€ pro Nacht</p>
<p id="bewertung">★★★★★ 320</p>
</div>
<div class="angebote">
<img src="Bilder/Airbnb/hotel-3.jpg" alt="">
<p id="angebot">GANZES HAUS ⸱ FUJIEDA</p>
<p id="beschreibung">Yui Valley-Traditional <br> House</p>
<p id="preis">89€ pro Nacht</p>
<p id="bewertung">★★★★★ 220</p>
</div>
I marked the divs with blue lines
These two div's are spaced evenly. You can either use flex or grid to achieve it. Make sure that the div are direct children of flex if you want them to align evenly. You can use flex-wrap to move the successive divs below;
.container{
width:60%;
margin:auto;
}
.container1{
display: flex;
margin: 15px 15px 15px 0px;
margin: 0 auto;
align-items: center;
justify-content: space-evenly;
}
.angebote{
width: 250px;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>Unterkünfte rund um die Welt</h2>
<div class="container1">
<div class="angebote">
<img src="Bilder/Airbnb/hotel-2.jpg" alt="">
<p id="angebot">GANZE WOHNUNG ⸱ KOPENHAGEN</p>
<p id="beschreibung" >Sonniges Penthouse mit 5 Balkonen</p>
<p id="preis">206€ pro Nacht</p>
<p id="bewertung">★★★★★ 320</p>
</div>
<div class="angebote">
<img src="Bilder/Airbnb/hotel-3.jpg" alt="">
<p id="angebot">GANZES HAUS ⸱ FUJIEDA</p>
<p id="beschreibung">Yui Valley-Traditional <br> House</p>
<p id="preis">89€ pro Nacht</p>
<p id="bewertung">★★★★★ 220</p>
</div>
</div>
</body>
</html>
Related
I'm making a website for a friend who isn't very tech savvy. She wants a box that'll get bigger based on how many lines of text she puts in on the back end.
This is the relevant page. She wants the light grey box (and the dark grey one too, I guess) to grow as she adds more pages to the list. Problem is, I only know rudimentary CSS from building a basic website for fun.
I've been attempting to use CSS grids to evenly space the entries, but that's not working, and I haven't been able to find a way to grow the boxes based on the text. Any help is appreciated.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Watch as I Perform my own Tracheotomy
</title>
<link rel="shortcut icon" type="image/png" href="https://cdn.discordapp.com/attachments/889079414732779580/1028746579101876264/Icon.png"/>
</head>
<style>
.square {
height: 550px;
width: 100%;
background-color: #8C8C8C;
}
.square2 {
height: 400px;
width: 900px;
background-color: #B8B8B8;
margin: auto;
margin-bottom: 25px;
display: grid;
grid-template-rows: 80px 200px;
}
.square3 {
margin-top: 10px;
height: 100px;
width: 900px;
background-color: #8C8C8C;
margin: auto;
}
.log {
width: fit-content;
gap: 10px;
padding: 5px;
margin-bottom: 0em;
font-size:1.5em;
}
</style>
<body style="background-color:#212121;">
<div>
<p style="text-align:left; font-family:'Courier New'">
<FONT COLOR="#FFFFFF">
<br>
<u>Watch As I Perform My Own Tracheotomy.</u>
<br>
<br>
</p>
</div>
<div class="square">
<div class="square2">
<p style="text-align:left; color:#FFFFFF; margin-left:4%; font-family:'Courier New';"><FONT COLOR="#000000"><br><br>
<div class="log">
<br> <b>11/10/22</b> - Page 7 </div>
<div class="log">
<br> <b>09/10/22</b> - Page 6</div>
<div class="log">
<br> <b>09/10/22</b> - Page 5</div>
<div class="log">
<br> <b>09/10/22</b> - Page 4</div>
<div class="log">
<br> <b>08/10/22</b> - Page 3</div>
<div class="log">
<br> <b>08/10/22</b> - Page 2</div>
<div class="log">
<br> <b>08/10/22</b> - Page 1 </div>
</p>
</div>
</div>
<div class="square3">
<p style="text-align:left; font-size:.9em; font-family:'Courier New'; margin-top: 150px; margin-left:3%;">
</div>
</body>
</html>
Try this, wrap your text with class item, or maybe you can explore from this snippet.
.container {
border: 2px solid #ccc;
padding: 10px;
width: 30em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
The problem is that I have an image on the left side of my screen and I have a paragraph on the right side of my screen and I have an hr line below the paragraph and the image. So whenever I resize the browser window, the paragraph just goes below the hr line because it gets compressed(squashed) on resizing. I don't want the paragraph to go below the hr line even if I resize the browser window. I want the paragraph to go below the image but not exceeding the hr line. If you want to see what is the problem please check out my website and resize the browser window to see the problem.
Link to website: http://www.greenfield-school.com/AboutUs.html
Thanks
This is the HTML:
<h3><b>About Us</b></h3>
<hr style="border: 2px solid green; width: 88%">
<div class="row2">
<div class="column2" style="background-color:;">
<img class="pic img-responsive" src="Icon.jpeg" style="height: 200px; height: 230px">
</div>
<div class="column" style="background-color:;">
<h5 class="welcome"><b>Mission</b></h5>
<p class="paragraph" style="font-family: book antiqua"><li class="vision1">To care for, respect and encourage all children equally, regardless of gender or ability.</li>
<li class="vision1">To encourage our pupils to develop a sense of self worth, self discipline, personal responsibility and consideration for others.</li>
<li class="vision1">To provide an enjoyable, challenging and purposeful atmosphere for our pupils.</li>
<li class="vision1">To value and encourage the special talents and strengths of pupils.</li></p>
</div>
</div>
And this is the CSS:
.vision1 {
list-style-type: square;
font-family: book-antiqua;
}
.row2{
display: flex;
padding: 2rem 6rem;
}
.column {
flex: 60%;
height: 200px; /* Should be removed. Only for demonstration */
}
.column2{
flex: 0%;
height: 0px; /* Should be removed. Only for demonstration */
}
h3{
padding: 5rem 5rem 0rem;
color: green;
}
Let me offer you an alternative - I can't seem to trigger that auto-adjust on the container height. But this works seamlessly:
This is your HTML:
<div class="container">
<div class="column one"> Column 1 - this is where your picture is</div>
<div class="column two"> Column 2 - this is where your paragraph is</div>
</div>
<hr />
This is CSS:
.container{
width: 100%;
overflow: auto;
height: auto;
clear: both;
display: block;
}
.column{
float: left;
}
.column.one{
//style for column one here
}
.column.two{
//style for column two here
}
hr{
clear: both;
}
This will adjust the height of the container based on on the biggest height of either column one or column two
I have checked this code here CodePen
I would like to achieve this effect
Basically, I want an image and text both centered with the image to the left and text to the right. Both image and text are part of a bigger div that makes up its own row. It doesn't matter if the img or text is part of its own div as long as this effect is achieved.
It would be best to have this done without using flex, which I think is a common way to work around any trouble with spacing and position. However, I've read negative things about this technique so i rather just play it safe and not use it.
Help would be awesome, thank you
I had also same problem. I wanted to achieve the center alignment of image and text and solved it using the technique that i used in this fiddle. Check this fiddle
<div style="background-color:black;color:white;padding:20px; display: flex;">
<div style="color:white;overflow:hidden;width: 50%;height: 100px;">
<img src="http://placehold.it/350x150" style=" margin-right: 10px; float: right; width: 75%;">
</div>
<div style="color:white;/* padding:20px; */width: 50%;height: 100px;">
<h2 style=" margin-left: 10px;">This is text</h2>
</div>
</div>
https://jsfiddle.net/Lpjxse6L/
You can try this..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="border: 2px solid; text-align: center;">
<div class="col-sm-3">
<h3>Parent Div</h3>
</div>
<div class="col-sm-3" style="border: 2px solid; margin: 14px;">
<h3>Div of image</h3>
</div>
<div class="col-sm-3" style="border: 2px solid; margin: 14px;">
<h3>Div of text</h3>
</div>
<div class="col-sm-3">
</div>
</div>
</body>
</html>
Here is what I did, see if you understand it or if you have any questions. http://codepen.io/anon/pen/RKppYd
<div class="container">
<div class="images"><img class="top" src="http://placehold.it/350x150"></div>
<div class="text">some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably. </div>
</div>
.container {
text-align:center;
}
.top {
vertical-align: text-top;
}
.images {
display:inline-block;
}
.text {
display:inline-block;
vertical-align: text-top;
width:350px;
background-color: black;
color:white;
}
If you don't want to use displa:flex then use can try this
.container{
float:left;
position:relative;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%);
}
.section{
float:left;
margin:0 10px;
padding:10px;
border:1px solid #000;
}
.wrapper {
background: #fbfbfb;
border: 1px solid #000;
float: left;
width: 100%;
padding: 10px 0;
}
<div class="wrapper">
<div class="container">
<img src=" http://fillmurray.com/200/200" class="section"/>
<div class="section"><p>Text for fun!!</p></div>
</div>
</div>
It's pretty straightforward if you use display flex.
You can then set the justify-content property to center.
.parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* The following is optional, to add space between image and text */
.parent div {
margin: 0 5px;
}
<div class="parent">
<div><img src=" http://fillmurray.com/200/200"/></div>
<div><p>Text for fun!!</p></div>
</div>
I have a strange problem with my CSS / HTML.
I have a LI which contains two DIV, each 15px height:
But all the browsers compute the height of the LI > 15px.
Also the elements are vertically displaced.
In my opionen the LI should have a height of 15px.
The first DIV inside the LI is a text, and the second DIV is just there to display an background image.
If you check the height with the Firefox Developer Tools, the height of each div is not higher than 15px.
Can someone explain to me why this is happening ?
Just open the code below in the newest Firefox.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body style="font-size:12px;">
<div style="min-height:500px; width:20%; margin:auto; background-color:red;">
<ul style="background-color:green;">
<li style="background-color:yellow;">
<div style="display:inline-block;width:90%">li #1</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</li>
<li style="background-color:yellow;">
<div style="display:inline-block;width:90%">li # 2</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</li>
</ul>
</div>
</body>
</html>
No additional CSS is used.
If you replace the LI with DIV, it has still the same behaviour
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body style="font-size:12px;margin:0;padding:0;">
<div style="min-height:500px; width:20%; margin:auto; background-color:red;">
<div id="parent1">
<div style="display:inline-block;width:90%">li #1</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</div>
<div id="parent2">
<div style="display:inline-block;width:90%">li # 2</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</div>
</div>
</body>
</html>
If I give the inner div's of the parent divs the style attribute "float:left;" everything looks as it supposed to be. I want to understand why the browser give the parent div the addiotional 4px, and make it look shitty.
If you set the height of the parent DIV to 15px, it looks how it supposed to be. But if you don't set the height, the height is 18px. How does the browser calculate 18px ? The height of each child is only 15px.
because inline layout has space. like:
<div style="background-color: black; width: 50px">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
<!-- there is a space here, maybe 4px or other size -->
</div>
so the problem is how to remove inline space. There are some methods:
use font-size: 0 , which can set "space" 0 also.
<div style="background-color: black; width: 50px;font-size:0">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
make child be block. because block elment dosen't leave space.
<div style="background-color: black; width: 50px">
<div
style="
display: block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
use float(not recommended now, use flex instead)
<div style="background-color: black; width: 50px; overflow: hidden">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
float: left
"
/>
</div>
use flexbox
<div style="background-color: black; width: 50px; display: flex">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
you can learn from below links also:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
How do I remove the space between inline/inline-block elements?
It’s because you are making the DIVs inline-block, which means they will be laid out in the line box like any other inline element, and that means leaving space for the underlengths of potential text on the same line.
vertical-align: bottom for the DIVs will fix that.
I cannot get the image container (.colored-logo) to span the width of the browser when I shrink it to mobile size. I have created a fiddle here so you can see the behaviour.
Apologies but I have placed all my CSS in here to make sure that whatever it is affecting it is included.
I am working on an email template and I am centering horizontally and vertically a logo into a boxed area with rounded corners.
My HTML is:
<div class="row invoice-top-header">
<div class="column third colored-logo">
<div class="logo">
<span class="image-center"></span><img src="http://s24.postimg.org/ebd3rwub5/fresh_creations_logo.png"/>
</div>
</div>
<div class="column third">...</div>
<div class="column third">...</div>
</div>
The row class adds a 15px internal padding which I offset in the container (colored-logo) with a -15px margin left and right.
The CSS I apply is this:
.colored-logo {
background: #989898;
height: 128px;
margin: 0px -15px 10px -15px;
padding: 15px;
width: 100%;
}
.logo {
white-space: nowrap;
text-align: center;
}
.image-center {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Why is the logo container (div with class colored-logo, dark grey background) not filling the browser horizontally once in mobile mode? It looks to be 30px too short to cover the browser horizontally.Thanks!
It seems you have padding both to your row class and your column.
Try this css if you want your changes to take effect only in mobile screens:
#media screen and (max-width: 640px) {
.colored-logo, .row {
padding: 0;
margin: 0;
}
}
<div class="invoice-top-header">
<div class="column third colored-logo">
<div class="logo">
<span class="image-center"><img src="http://s24.postimg.org/ebd3rwub5/fresh_creations_logo.png"/>
</div>
</div>
<div class="row">
<div class="column third">
<div class="biller-details">
<span><strong>BILLER NAME PTY LTD</strong></span>
<span>ADDRESS LINE 1</span>
<span>ADDRESS LINE 2</span>
<span class="desktop">TEL: 02 3333 4444</span>
<span class="mobile">TEL: 02 3333 4444</span>
<span>ABN: 12345678</span>
<span>ACN: 09876543</span>
<span>sample#email.com</span>
<span>my-website.com.au</span>
</div>
</div>
<div class="column third">
<div class="customer-details">
<span><strong>CUSTOMER NAME PTY LTD</strong></span>
<span>ADDRESS LINE 1</span>
<span>ADDRESS LINE 2</span>
<span class="desktop">TEL: 02 5555 7777</span>
<span class="mobile">TEL: 02 5555 7777</span>
<span>ABN: 12345678</span>
<span>ACN: 09876543</span>
<span>sample#email.com</span>
<span>customer-website.com.au</span>
</div>
</div>
</div>
</div>
Change your HTML into this one above
Remove margin css property from .colored-logo
If you are coding a newsletter you should really consider using tables and avoid css3 properties as many of the email clients still doesnt support lot of things. Here you can find a list with email clint which does and doesnt support media queries:
https://litmus.com/help/email-clients/media-query-support/
Just tested and it works
Disabling these values / properties seems to work
.row {
margin: 0 auto;
/* padding: 15px; */
max-width: 1040px;
width: 100%;
}
.colored-logo {
background: #989898;
height: 128px;
/* margin: 0px -15px 10px -15px; */
padding: 15px;
width: 100%;
}
Just adjust as required in your media queries.
JSfiddle Demo