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>
Related
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>
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'm trying to get my textarea and div to be side by side and have the run button underneath but I'm not sure why it isn't working.
The output looks like this:
http://codeeplus.net/test.php
CSS:
.CodeMirror { height: 400px; width: 500px; border: 1px solid #ddd; }
.CodeMirror-scroll { max-height: 400px; }
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
#drawing { border: 1px solid #555555; float:left; width:480px; height: 400px; }
HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; width:50%; height: 50%; border: 1px solid #000000;">
<div style="float:left">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</html></textarea>
</div>
<div style="float:left;">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<input type="button" id="run" value="Run" />
</div>
I would use two div's one to wrap around your text area and one to wrap around your other div. This way you can just use float: left; to put them both side by side :)
your code seems have many problems :), I made some changes:
remove float:left; from divs
set display:inline-block;
add clear:both tag before button
remove width:50%; and height:50% form first div
look at new HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; border: 1px solid #000000;">
<div style="display:inline-block; vertical-align:top;">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</textarea>
</div>
<div style="display:inline-block">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<div style="clear:both"></div>
<input type="button" id="run" value="Run" />
</div>
jsFiddle is here
You should use display: inline-block; property here, on the elements you want to align in one line:
div {
display:inline-block;
}
Online Example
The default value for div tags is display:block;
EDIT 1:
I have checked your page. The div that you're trying to align in is not aligning, because your parent div has width:50% and it's simply not fitting in there. Try changing it to, let's say width:100% and see that it really works!
EDIT 2:
Also remember, that if you use padding, as you apparently do on your page, it's affecting the actual (final) width of the element. For example, if you set the parent div's width: 1200px and padding as padding:10px;, then the actual div's size will be 1160px, cutting 10px on each side.
So what I'm trying to do is create a mock up for my own little website in HTML. So everything been going good until just now. What I want to do is display an image and then a title and description next to it, sort of like what youtube does.
Example:
So the way I have it right now it works perfectly if the text doesn't have to drop down to a new line.
Example of it working:
However, if one of them is too long, everything gets messed up, example of messed up:
I set up a JS fiddle to make it easier for you guys. However remember I'm designing with bootstrap so the reason the CSS is so long is because it includes the full bootstrap, however only the first 57 lines is my custom written css. Anyway, if anyone could help me so that when my title or my description is too long it will drop onto the next line like youtube does.
My HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Comments</title>
</head>
<body>
<div class="logo">
<img height="70" width="200" src="/img/logo.png">
</div>
<div class="container">
<div class="leftBar">
<div class="well">
<div class="title">
<h3>Mini Title</h3>
</div>
<hr/>
<div class="contentLink">
<div class="smallContentImage">
<img src="http://i.imgur.com/zesaMhG.gif">
</div>
<div class="smallContentText">
<h5>Title Goes Here</h5>
<em>
Other Informati
</em>
</div>
</div>
</div>
</div>
<div class="rightBox">
<div class="well">
<div class="title">
<h1>Title For Content</h1>
</div>
<p> CONTENT CONTENT CONTENT </p>
</div>
</div>
</div>
</body>
</html>
MY CSS
body {
background #FAFAFA;
}
.title {
text-align: center;
}
.logo {
margin-right: auto;
margin-left: 2%;
padding-top: 2%;
}
.leftBar
{
margin-right: auto;
float: left;
width: 30%;
overflow: hidden;
}
.rightBox
{
margin-left: 0;
float: right;
width: 70%;
}
.contentLink
{
padding-left: 1%;
padding-right: 1%;
width: auto;
height: auto;
}
.smallContentImage {
width: 100px;
height: 100px;
margin-left: 0;
margin-right: auto;
float:left;
}
.smallContentText {
float: right;
width: auto;
margin-left: auto;
margin-right: 0;
width: fixed;
}
JS Fiddle: http://jsfiddle.net/BjSv8/
Thank you
There is no such thing as width:fixed. You need to make sure the widths of the two content items add up to the width of the parent.
Is there any reason you used em instead of div.
If you could use 'div' instead of 'em' and define the width , then your problem could be solved.
<div style="word-wrap:break-word;border:1px solid red; width:100px">
Other Information goes here
</div>
See this fiddle: http://jsfiddle.net/BjSv8/1/