I've been trying to prevent td to overflow to the right inside tr. Instead I want to break it to new line when its content is growing but keep the whole content in one tr.
I've tried with width property but it doesn't seem to work.
I'm new to css, so I don't really know what else to do.
Since the table has more content in one line than a screen monitor can fit, you might want to enable scrolling.
One option you could try is to enable scrolling for the div.comicstable container.
.comicstable {
overflow-x: auto;
}
Or if you want to handle the scrolling manually using JavaScript, disable the overflow:
.comicstable {
overflow-x: hidden;
}
If you want your content to wrap if they are longer than a screen can display, you could try out the flex-box.
.flexbox {
display: flex;
flex-wrap: wrap;
}
.flexbox > div {
margin: 5px;
}
<div class="comicstable">
<div class="flexbox">
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
</div>
</div>
See also:
Basic concepts of flexbox
A Complete Guide to Flexbox
I think easiest in your case is to apply
.comicstable table tr td {
/* ... previous code... */
display: inline-block;
}
That will move TDs to the next line when there's no more width left.
Related
I've been doing some stuff with HTML and I need to have a few columns. I know how to make them and the basics of how they work. However, there is a certain problem that I have. I need to have 3 columns that have an image on top, then text on bottom. However, the text on bottom can't flow into the next column if the browser is resized - it just needs to go up or down. What I have so far:
body {
background-color: white;
font-family: times, serif;
color: black;
}
div {
display: flex;
margin: 50px;
flex-wrap: wrap;
}
<div>
<div class="first">
<img src="Images/australia_flag.jpg" alt="Australian Flag" title="Australian Flag" height="200" width="300"> text as well </div>
<div class="second">
<img src="Images/brazil_flag.jpg" alt="Brazilian Flag" title="Brazilian Flag"> even more text </div>
<div class="third">
<img src="Images/china_flag.jpg" alt="Chinese Flag" title="Chinese Flag" height="200" width="300"> text again
</div>
</div>
not entirely sure if you mean columns or rows? Based on your code, it looks like rows. If that's the case, I'm not sure what you mean by "flow into the next column"? You might check out the relative and absolute values for CSS position.
If, in fact, you do actually mean columns, I'd strongly advise using Bootstrap's Grid System. This is great for creating responsive columns.
Please take a look at this simple 3 column layout with a full width content area on top and bottom here: https://jsfiddle.net/7drfva0o/2/
.top, .bottom {
width:98%;
padding:1%;
background-color: red;
clear:both;
}
.cols {
width:31%;
padding:1%;
float:left;
background-color:blue;
border: 1px solid #FFF;
}
Is that what you're looking for?
First, you'll need to improve your markup: having images and texts as DOM node to be "flexed"
HTML markup improved
<div class="wrapper">
<div class="column">
<img src="..." />
<p>text</p>
</div>
<div class="column">
<img src="..." />
<p>text</p>
</div>
<div class="column">
<img src="..." />
<p>text</p>
</div>
</div>
Then, each of your div is going to have display: flex + flex-direction: column to allow the image going on top and the text going below. You will be able to adjust margin or whatever. At the minimum, I'd go like this:
CSS improved
.wrapper {
display: flex;
}
.column {
margin: 5px;
display: flex;
flex-direction: column;
}
Wrapped altogether, here is a snippet of what I think you're trying to achieve
Snippet
.wrapper {
display: flex;
}
.column {
margin: 5px;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
</div>
Then, feel free to play with flexbox properties to align, wrap, adjust alignments, etc. Great documentation on CSS-Tricks : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
How do i make a scroll-able horizontal line up of round shaped images that originate from a square shaped images with a captions below. And if possible make it seperate each other. Sorry for the bad grammar
Before I answer your question please note that Stack Overflow is not a platform to ask for code but rather to seek help with not-working code you have already written yourself. As mentioned by CBroe already we highly recommend reading How to Ask. Don't expect answers like this in the future.
First of all the question is how to structure the elements in HTML before we come to the CSS part. Since you're asking for a line up of multiple elements having a "container - element" structure seems suggestive.
div (container)
div (element1)
div (element2)
div (element3)
...
/div
Now we have to put the round image together with the caption below in the element. That's also pretty simple:
div (element)
img (circular picture)
div (caption)
/div
Let's translate this into proper HTML
<div class="container">
<div class="elem">
<img src=""/>
<div>Caption #1</div>
</div>
<div class="elem">
<img src=""/>
<div>Caption #2</div>
</div>
<div class="elem">
<img src=""/>
<div>Caption #3</div>
</div>
...
</div>
Time to get into CSS. As of right now every element is aligned vertically, not horizontally. One solution I personally really like is Flexbox. It lets you play dynamically with multiple elements which is exactly what we are looking for.
.container {
display: flex;
overflow-x: scroll;
}
That's enough to have each Element aligned horizontally as Flexbox structures the items horizontally by default. overflow-x: scroll; prevents the items to resize the web page and will make the container horizontally scrollable as a fix.
The only thing that's left is to make the image circular and that is super easy to do. All we have to do is to add a border-radius which is bigger than the image size itself:
.elem img {
width: 100px;
height: 100px;
border-radius: 500px;
}
Done.
.container {
display: flex;
overflow-x: scroll;
}
.elem {
padding: 8px;
}
.elem img {
margin: 8px;
background-color: grey;
height: 100px;
width: 100px;
border-radius: 5000px;
}
.elem div {
text-align: center;
font-size: 18px;
}
<div class="container">
<div class="elem">
<img class="pic" src="https://www.famousbirthdays.com/headshots/justin-bieber-2.jpg" />
<div>Caption #1</div>
</div>
<div class="elem">
<img/>
<div>Caption #2</div>
</div>
<div class="elem">
<img/>
<div>Caption #3</div>
</div>
<div class="elem">
<img/>
<div>Caption #4</div>
</div>
<div class="elem">
<img/>
<div>Caption #5</div>
</div>
<div class="elem">
<img/>
<div>Caption #6</div>
</div>
<div class="elem">
<img/>
<div>Caption #7</div>
</div>
</div>
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
This is a follow up from this question: Autofit text under image with only css
Why does the inline-block divs in this code produce extra width on the right side of the elements?
.item {
display: inline-block;
background-color: red;
}
.image-container {
background-color: blue;
display: table;
width: 1%;
}
img {
height: 120px;
}
.text-wrapper {
overflow: hidden;
}
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
Edit: This is NOT a problem with whitespace, see this jsfiddle without any whitespace and notice that the div still takes up lots of extra space (the red area): https://jsfiddle.net/2Lzo9vfc/332/
Edit2: To clarify my requirements: I have N images with varying width that I wish to layout in a "dynamic table", i.e. the images should be inline so they will automatically wrap when running out of horizontal space in parent. Where this gets tricky is that I have some text that I wish to display under each image that should wrap with the image width as well (and as I said, the image width may vary).
The red portion of the item is an artifact of the browser not knowing how to correctly size the containers. It's using the length of the text to determine the width before the table layout is applied. If you know the width of the items, you can use this simpler approach:
.item {
display: inline-block;
background-color: blue;
width: 120px;
}
.image {
display: block;
height: 120px;
}
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
I don't know off hand of a way to make the elements shrink to the smallest possible width while still containing all child elements.
I modified #Brandon Gano's second answer. I used display: table-caption; on .text-wrapper.
Here's the CSS I modified from his jsfiddle:
.text-wrapper {
overflow: hidden;
display: table-caption;
caption-side: bottom;
height: 60px; /* You may have to modify the height */
background-color: blue;
}
And the updated jsfiddle.
You're seeing whitespace added between the inline-block elements. You can remove the horizontal space between these items by removing all whitespace between the elements. e.g.:
<div>
...
</div><div>
...
</div><div>
...
</div>
Note that the closing tag is immediately followed by the next opening tag.
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.