so I want to scale a div down, but when I do that, it still takes up the same amount of space, but there is just whitespace instead, and then it is small in the middle.
But I want it to actually take up less space, and allow the elements above and below to be closer to it.
Heres an example of the problem:
HTML:
<h1>A title goes here</h1>
<div>
<span>Some text here</span><br>
<span>Some text here</span><br>
<span>Some text here</span><br>
<span>Some text here</span><br>
<span>Some text here</span><br>
<span>Some text here</span><br>
</div>
<p>And some more text here</p>
CSS:
div{
width: fit-content;
transform: scale(0.5);
}
Codepen:
https://codepen.io/Tobias-Hewel/pen/ExvdENN
Add styles to the html and body elements to reset all the whitespaces.
html,
body {
margin:0;
padding:0;
overflow-x:hidden;
}
Related
Is it possible to define a CSS grid, with auto-rows (a dynamic number thereof) which size to a container based only on the number of them, i.e. filling the available vertical space - and then containing any content within that vertical space.
See below, the left hand side shows the equal row height sizes assigned when the content does not cause the rows to grow.
On the right is the problem - long text causes the heights to then become unequal.
The code is at this pen:
https://codepen.io/jamesharcourt/pen/GRBdRWo
In the image above, I want the sizes to remain as per the left and the text to essentially not be visible / overflow to be hidden.
Sample css:
.columns {
display: flex;
}
.content-area {
height: 300px;
width: 500px;
display: grid;
grid-auto-rows: 1fr;
background: pink;
}
.item {
margin: 2px;
background: gray;
}
Sample HTML:
<div class="columns">
<div class="content-area">
<div class="item">1 short text</div>
<div class="item">2 short text</div>
<div class="item">3 short text</div>
<div class="item">4 short text</div>
</div>
<div class="content-area">
<div class="item">1 short text</div>
<div class="item">2 short text</div>
<div class="item">3 short text</div>
<div class="item">4 long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
</div>
</div>
Here is how you can do it :
.item {
margin: 2px;
background: gray;
height:150px;
overflow-y: auto;
}
Here is my code:
<img id="mepic" src="images/example.jpg" width="70px" height"60px">
<p>This is some example text that i want next to the image on the right hand side</p>
At the moment, the text is underneath the image. How do I put the text next to the image?
NO CSS & JavaScript, PURE HTML
<p><img src="image.png" alt="image"/> Text beside image</p>
Place <img> inside a <p> can put the image surround by text. Read more here.
NOTE: <img> tag has display: inline by default and is basic a non-breaking space, read more here.
<p>This is some text.
<img src="http://placehold.it/60x60" alt="Smiley face"> This is some text.</p><br/>
<p>
<img src="http://placehold.it/60x60" alt="Smiley face" align="middle"> This text is next to the image</p>
you can do it without changing the html structure
As img is a inline element you can set the next sibling p to inline
By default p is a block element so it is taking full width
more about + selector
img + p {
display: inline;
margin-left: 10px;
vertical-align: top; /* so that p aligns to the top of img*/
}
<img id="mepic" src="http://placehold.it/70x60" width="70" height="60">
<p>This is some example text that i want next to the image on the right hand side</p>
If you want to place text to right side of an image, here's code which will allow it:
<p><img src="example.jpg" alt="img"> Image text here.</p>
Running example: https://jsfiddle.net/apc5spcu/
Alternately, you could use divs and make a nicer looking image form.
HTML
<div class="container">
<div class="imgdiv">
<img src="example.jpg" alt="img">
</div>
<div class="textdiv">
<p> Image text here.</p>
<p> Image text here.</p>
<p> Image text here.</p>
<p> Image text here.</p>
</div>
This code makes use of 'Float' which positions each division next to eachother on left and right sides.
CSS
.container {
width:540px;
}
.imgdiv {
float:left;
width:140px;
}
.textdiv {
float:right;
width:300px;
}
Running example: https://jsfiddle.net/apc5spcu/1/
As a side note, since you tagged this as HTML5, you would be better off using <figure> and <figcaption> to mark up this content.
For example:
<figure>
<img id="mepic" src="images/example.jpg" alt="Text" />
<figcaption>This is some example text that i want next to the image on the right hand side</figcaption>
</figure>
Then you could style it like:
figure {
margin: 0;
width: 600px;
height: auto;
overflow: hidden;
}
figure img {
width: 30%;
float: left;
}
figure figcaption {
width: 70%;
float: right;
}
I've managed to align side by side the DIV containing the image, and the DIV containing the text, side by side, by applying float:left to the image DIV.
But when I Include these two DIVs in a parent DIV, and duplicate the parent and try to align the parents side by side by applying float:left to the first parent, it doesn't work.
Here's my code:
<div style="width:350px;min-height: 200px; float:left;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
and fiddle.
I also wonder whether the rest of the code is best practice, such as padding-left:135px - would it be better to use relative padding from the image, rather than the parent div? if so, what's the easiest way to change that?
You have the float:left outside of the style attribute, try moving that inside the speech marks and applying float: left to both parent divs.
Updated Fiddle
You can simply change your code to the below, giving each div a display:inline-block; then as long as your browser window is greater than the sum of the two div widths, they will display inline, no need for floats:
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;">
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;"/>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"/>
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
That said I would strongly recommend you separate your CSS from your HTML in order to make a clear distinction between content and presentation and capture the clear benefits that offers.
You had one of your float: left attributes outside of the style tag. Also, you should use CSS classes instead of putting all of your CSS styles inline. It makes your code much neater and prevents a lot of duplicated styling. Here is an updated Fiddle.
HTML
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
CSS
.parent {
width:350px;
min-height: 200px;
float:left;
}
.title {
font-size:15pt;
color:red;
letter-spacing:-.04em;
padding-top:2px;
padding-left:135px;
}
.text {
font-size:11pt;
color:black;
letter-spacing:-.02em;
margin-top:4px;
padding-left:135px;
}
.image-wrap {
float: left;
}
.image {
border: 1px solid black;
padding:1px;
}
Based on my earlier thread I'm trying to use and understand the recommended way to align two divs horizontally using the overflow element.
With my short text the two divs align correctly, but when I add loner text it drops below the image. Can anyone explain why this is happening and how do I fix it?
My JSFIDDLE
HTML:
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
CSS:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
padding:5px;
float: left;
}
div.right {
float: left;
}
.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}
Floats expand to try to encompass their content. They generally expand up to the width of the containing region, regardless of how they are positioned. That is why it is going to a new line when the text is really long.
For what you are doing, I believe you want the image to the left of some text. This is done by having the outer region set with clearfix CSS (to always encompass all floats):
.container {
overflow: hidden;
min-width: 1px;
}
/* IE7+ */
*+html .container {
min-height: 1%;
}
Then, only float your image to the left. Do NOT float your content. Add margins around the image as desired. So something like:
.left {
float: left;
margin: 0 10px 10px 0; /* 10px on right and bottom */
}
The content in the div will then act like you are expecting.
Remove the float rule on the long text (jsFiddle example). When en element is floated after another floated element, it can't come before it vertically.
<div>
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
See the W3 for the long version:
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
Remove the float:left; on the rule and it will work. However, you may want to improve and test in ie 6+.
You have to set max-width attribute to restrict your text form taking as much space as available and to get maximum space its going to next line.
http://jsfiddle.net/a6BbD/1/
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
<br>
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some short text here</div>
</div>
</div>
The recommendation says you should always set width on floated elements.
the below link has great material to understand floats..
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
I have a liquid layout page that has a max and min width of the body set (1260px and 960px, respectively). I have a left-hand sidebar that takes up the left 25% and the content which takes up the right 75% of the screen. Within the content I have placed two div containers with fixed width pictures in them (300px x 225px) with some text below each.
What I would like to do is to have those div boxes remain their own static width (300px as determined by the width of the picture above the text) but to be able to remain, for argument's sake, 50px apart inline and always in the center (bar the 50px apart) despite what browser I have them in (either the 1260 or 960px, or somewhere inbetween). The reason that I would like this is that if I use margin to separate them they only look 'centered' (again, bar the 50px in between them) in one browser width and aren't liquid in their layout.
JSFiddle: http://jsfiddle.net/fpN5t/1/
Please let me know if I'm not explaining myself very well!
Thank you so much in advance.
<div id="content">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<h1 class="first-content-heading">Heading 1</h1>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h2>Heading 2</h2>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h3>Heading 3</h3>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
</div>
#content {
width: 75%;
float: left;
margin: 0;
background: #FFF;
}
#upper-left-box {
width: 300px;
margin: 0 auto;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
margin: 0 auto;
position: relative;
text-align: center;
float: left;
}
.first-content-heading {
clear: both;
}
You can center the upper boxes by putting a container around them with margin auto. Then you can place a 50px margin in between the boxes for the effect you are looking for"
http://jsfiddle.net/fpN5t/2/
<div class="upper-boxes">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
</div>
.upper-boxes{ width: 650px; margin: 0 auto; }
#upper-left-box {
width: 300px;
margin:0 50px 0 0;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
position: relative;
text-align: center;
float: left;
}
Hopefully I understood the problem correctly, if not please indicate.