I have code like this:
<div class="more-options clearfix">
<div class="boxes">
<img alt="#" src="images/icons/onl-marketing.png">
<p>Online Marketing News</p>
</div>
<!-- end .boxes -->
<div class="boxes">
<img alt="#" src="images/icons/str-success.png">
<p>Stories Success</p>
</div>
<!-- end .boxes -->
I want to vertical align p tags middle in div, images float left and div.box:last-child has margin-left: 1%; I try this css but it doesn't work:
div.more-options {
margin: 15px 0;
div:first-child {
.fleft;
}
div:last-child {
margin-left: 1%;
}
div.boxes {
padding: 20px;
width: 49.5%;
background: #ecf0f1;
min-height: 25px;
display: table-cell;
vertical-align: middle;
img {
.fleft;
margin-right: 25px;
.img-responsive;
max-width: 25%!important;
}
p {
.fontfc(26px, #666666);
}
}
/* end div.boxes */
}
/* end div.more-options */
How can I vertical align text and keep margin 1% div.boxes:last-child?
here you have some fixes:
p and img with display:inline
it's working the vertical-align:middle;
making the parent display: table
EDIT: you are using padding and width: you will need an extra div for this, and with tables you need an extra cell for "separation", check this out:
updated link with images vertical aligned too:
the fiddle
html:
<div class="more-options clearfix">
<div class="boxes">
<div class="in">
<img alt="#" src="http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Banana-icon.png">
<p>Online Marketing News</p>
</div>
</div>
<!-- end .boxes -->
<div class="separation"></div>
<div class="boxes">
<div class="in">
<img alt="#" src="http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Banana-icon.png">
<p>Stories Success</p>
</div>
</div>
<!-- end .boxes -->
css:
div.more-options {
margin: 15px 0;
div:first-child {
}
div.separation {
width: 1%;
display: table-cell;
}
div.in{
padding:20px;
}
div.boxes {
width: 49.5%;
background: #ecf0f1;
min-height: 25px;
display: table-cell;
vertical-align: middle;
img {
display: inline-block;
margin-right: 25px;
.img-responsive;
max-width: 25%!important;
vertical-align: middle;
}
p {
.fontfc(26px, #666666);
display: inline-block;
}
}
/* end div.boxes */
}
/* end div.more-options */
the result screenshot:
p elements are paragraphs - so they have a default property of display:block. Either use another element, for example a span.
Alternatively you can change the display property of the p dom element, for example to display:inline.
Update - the property of vertical align 'vertical-align:middle' should be applied to the images.
Also - your nesting of styles seems wrong, see a working example below.
Example (updated):
http://jsfiddle.net/YwV54/2/
Your Structure is ok.
In order to use vertical-align:middle you need to use table structure:
#wrapper div#main-content div.more-options div.boxes{display:table;}
#wrapper div#main-content div.more-options div.boxes p{verticle-align:middle;}
#wrapper div#main-content div.more-options div.boxes img{max-width:25% !important; remove this}
Set padding margin according to content.
Related
I have a flexbox which contains "product boxes", which themselves contain thumbnails of the product. Is there a way I can wrap the thumbnails to the next line if the product box runs out of space on that line? I might have 10+ thumbnails per product so it might even need to run to the next two lines if needed, but they should still be "inline" with the reset of the products and not line-break at their beginning and end.
I don't have to use flexboxes, but I assume they might be useful for something like this. However I cannot figure this one out. Thanks!
.products {
display: flex;
background: yellow;
}
.product {
flex: 1;
margin: 1em;
background: magenta;
}
.thumbnail {
display: inline-block;
margin: 1em;
width: 100px;
height: 40px;
background: blue;
}
<div class="products">
<div class="product">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
<div class="product">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
</div>
What happens:
What I would like to happen:
With a few smaller adjustments you can achieve that, where to not group the thumbnails and use a wrapper to compensate for the top margin.
.products {
background: yellow;
}
.wrapper {
display: inline-flex; /* avoid collapsed margin on parent element */
flex-wrap: wrap;
margin-top: -15px; /* so margin only affect second row */
}
.products a {
padding: 1em;
margin-top: 15px;
background: magenta;
}
.products a:nth-child(3n) { /* target every 3rd element with a right margin */
margin-right: 15px;
}
.thumbnail {
width: 100px;
height: 40px;
background: blue;
color: white;
}
<div class="products">
<div class="wrapper">
<div class="thumbnail">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
</div>
</div>
As you mentioned in a comment, where the amount of thumbnails is arbitrary, it might not be practical to use nth-child to create the gap between the elements to be viewed as a group.
Based on that fact, and assumed you generate these thumbnails dynamically, you can either use a space element, or like below, add the margin inline.
.products {
background: yellow;
}
.wrapper {
display: inline-flex; /* avoid collapsed margin on parent element */
flex-wrap: wrap;
margin-top: -15px; /* so margin only affect second row */
}
.products a {
padding: 1em;
margin-top: 15px;
background: magenta;
}
.thumbnail {
width: 100px;
height: 40px;
background: blue;
color: white;
}
<div class="products">
<div class="wrapper">
<div class="thumbnail">1</div>
<div class="thumbnail">2</div>
<a style="margin-right: 15px" href="#"><div class="thumbnail">3</div></a>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<a style="margin-right: 15px" href="#"><div class="thumbnail">6</div></a>
</div>
</div>
Removed the two .product
then wrapped each thumbnail in an inline-block
the inline-blocks have a -2.5px left and right margins so they appear to belong to the same container when inline.
the outer block is display:table
every 3rd thumbnail has a .5em right margin (as suggested by LGSon)
Demo
*,
*::after,
*::before {
margin: 0;
padding: 0;
border: 0;
}
main {
display: table;
table-layout:fixed;
padding: .5em;
background: yellow;
}
b {
display: inline-block;
padding: 8px;
margin: 10px -2.5px;
background: magenta
}
.thumbnail {
width: 100px;
height: 40px;
background: blue;
}
main>div>b:nth-of-type(3n) {
margin-right: .5em
}
<main>
<div class="products">
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
</div>
</main>
I'm trying to figure out how to make equal column heights using HTML and CSS only. The method i'm trying to use is the setting the containing element to display table and the columns to display table-cell.
It works very well when there is text only in the columns. But if I add an image to one of the columns then it breaks. It looks like it adds massive padding above or below the elements in either column.
How do I fix this so that I have one column with text and the second column with the image. Columns with the elements aligned to the top of their container? IM STUCK :-(
See examples:
Two Columns Text Only: https://jsfiddle.net/acekicker77/gowcsx0c/
Two Columns with Image: https://jsfiddle.net/acekicker77/mqojn2kx/
HTML 2:
main {
background-color: aquamarine;
margin: 0 auto;
width: 60%;
padding: 1em;
}
#colWrap {
display: table;
width: 100%;
background-color: beige;
}
.col {
display: table-cell;
width: 25%;
background-color: brown;
border: 1px solid white;
padding: 0;
}
.imgWrap {
width: 50%;
}
img {
width: 100%;
height: auto;
}
<main>
<div id="colWrap">
<div class="col">
<p>This is a column of text</p>
</div>
<!-- close div class col -->
<div class="col">
<p>This is a column of text</p>
<p>This column is longer than the other</p>
</div>
<!-- close div class col -->
</div>
<!-- close id colWrap -->
</main>
Used vertical-align:top for align element on top of div
main {
background-color: aquamarine;
margin: 0 auto;
width: 60%;
padding: 1em;
}
#colWrap {
display: table;
width: 100%;
background-color: beige;
}
.col {
display: table-cell;
width: 25%;
background-color: brown;
border: 1px solid white;
padding: 0;
vertical-align:top;
}
.imgWrap {
width: 50%;
}
img {
width: 100%;
height: auto;
}
<main>
<div id="colWrap">
<div class="col">
<p>This is a column of text</p>
</div>
<!-- close div class col -->
<div class="col">
<img src="https://imageshack.com/i/povCNXlyj"/>
<p>This is a column of text</p>
<p>This column is longer than the other</p>
</div>
<!-- close div class col -->
</div>
<!-- close id colWrap -->
</main>
<!--close main content -->
you can use in .col class vertical-align: middle;
fiddle Add a vertical align middle to your table-cell element that will ensure your image is aligned
vertical-align: middle;
I want to remove the margin around a #header. It should be the same slim margin as in the #content box. In the first place, I do not understand, why #header and #content have different margins.
Any pointers are appreciate
#box {
background-color: lightgreen;
}
#header {
background-color: grey;
float: right;
width: 150px;
text-align: center;
padding: 0;
margin: 0;
}
#content {
background-color: lightblue;
clear: both;
}
<div id="box">
<div id="header">
<p>Header</p>
</div>
<div id="content">Content</div>
</div>
https://jsfiddle.net/datvLg9r/1/
<p></p> Tag have margin so you have to set margin:0 for p element.
This targets the p element within the div with id header only and removes the margin.
#header p {
margin: 0;
}
see demo https://jsfiddle.net/datvLg9r/1/
update HTML as follow - remove p element it will work.
<div id="box">
<div id="header">Header
</div>
<div id="content">Content</div>
</div>
This question already has answers here:
Wrapper div won't expand with Content div
(2 answers)
Closed 1 year ago.
I have four divs on my page. outer_div contains the other three: header , left-container and right-container. I have no concern with header and left-container. Actually my right-container div contains a dynamic table.
The problem is that when size of table grows, right-container div does not grows automatically. I mean its size stay static.
html code:
<html>
<body>
<div id="outer_div" style="background-color:Gainsboro; position:relative; top:50px; left:50px;height:550px;border-radius:8px; border:groove; width:1240px">
<div id="header" style="background-color:Khaki ; position:relative; top:5px; left:5px;height:50px;border-radius:8px; border:groove; width:1225px">
<h1 style="left:550px; position:relative; top:-7px">Admin Panel</h1>
</div> <!-- header ends-->
<div id="lef-container" style="background-color:LightSteelBlue ; position:absolute; top:65px; left:4px;height:475px;border-radius:8px; border:groove; width:280px">
</div> <!--left-container ends -->
<div id="right-container" style="background-color:LightSteelBlue ; position:absolute; top:65px; left:294px;height:475px;border-radius:8px; border:groove; width:936px">
<!-- this div contains dynamica table -->
</div> <!--right-container ends -->
</div> <!--outer div ends -->
</body>
</html>
how to fix it ?
here is css :
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
css of table :
var tab=document.createElement('table');
tab.style.width='800';
You need to have a dynamic width and height attribute such as fit-content. The problem is that you are using a fixed width of 936px and also a fixed height of 475px so the div will never stretch to be larger than that. You can do this instead:
<div id="right-container" style="...">
</div>
Then in css:
.right-container {
min-width: 936px;
min-height: 475px;
width: fit-content;
height: fit-content;
}
When the elements inside of right-container grow, then right-container will stretch to fit them inside.
As the others have pointed out, you are using fixed widths and heights, so the elements aren't going to grow to fit the content.
But I would suggest that you're going about this in generally a wrong way.
Some larger principles to consider:
Avoid inline styling. Use CSS to style your elements instead.
Avoid fixed sizing. Using things like flexbox instead.
For example, here's how I would do what you're doing here:
$("button").click(() => {
console.log("foo");
$(".right").append("<table/>");
});
.main {
display: flex;
flex-flow: column nowrap;
/* I'm doing fixed size here, as we need an initial container size*/
height: 100px;
width: 500px;
}
header {
/**
A specific height on header seems ok.
*/
flex: 0 0 4em;
background-color: #ddf;
}
.content {
/* Content fills the rest of the container*/
flex: 1 0 auto;
display: flex;
flex-flow: row nowrap;
}
.left {
/*Have a fixed width on the left. Maybe a percentage would be better*/
flex: 0 0 10em;
background-color: #fdd;
}
.right {
/* Right fills the remainder*/
flex: 1 0 auto;
background-color: #dfd;
}
table {
/*Fixed size for demonstration.*/
border: solid 1px black;
width: 150px;
height: 150px;
}
button {
margin: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> click me to add content</button>
<div class="main">
<header> admin panel </header>
<div class="content">
<section class="left"> left </section>
<section class="right"> right </section>
</div>
</div>
You have 3 options here:
You can use floats and clearfix.
You can use display:flex
You can use display :grid and then use flex
If you are targeting modern browsers only then option 2 and 3 will work great.
Please find below the HTML and CSS for the same - I hope it resolves your issue:
HTML
<!--outer div ends -->
<div id="outer_div" class="outer_div1">
<div id="header" class="header1">
<h1>Admin Panel</h1>
</div>
<div class="sec">
<!-- header ends-->
<div id="lef-container" class="left1">Left
</div>
<!--left-container ends -->
<div id="right-container" class="right1">Right
<!-- this div contains dynamica table -->
</div>
<!--right-container ends -->
</div>
</div>
CSS
.outer_div1 {
background-color: Gainsboro;
display: flex;
flex-direction: column;
margin: 0px auto;
max-width: 1240px;
}
.sec{
display: flex;
flex-direction: row;
}
.header1 {
background-color: Khaki;
text-align: center;
}
.header1>h1 {
}
.left1 {
background-color: LightSteelBlue;
width:calc(30% - 1.5rem);
margin: 1rem 1.5rem 1rem 1rem;
min-height: 50vh;
border-radius: .5rem;
padding:1rem;
}
.right1 {
background-color: LightSteelBlue;
width:calc(70% - 1.5rem);
min-height: 50vh;
margin: 1rem 1.5rem 1rem 1rem;
border-radius: .5rem;
padding:1rem;
}
<div style="display:inline-block;"></div>
This will increase div size according to contents in it.
The task I encountered looks standard: I have a fixed height container and 3 div's inside it. I want the 2nd div to be stretched between the top and the bottom div's. When the contents of the 2nd div overflows - I would like to show the scroll bars.
I know how to accomplish this task using the absolute positioning. A question is: can I do it using the table on divs?
An additional requirement: if possible, I would like to avoid setting header's height as fixed.
I have tried to code it in my fiddle, but, as you see, I failed.
CSS:
.container {
height: 500px;
background-color: gainsboro;
}
.table {
display: table;
height: 100%;
}
.table > div {
display: table-row;
}
.table > div > div {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
overflow: scroll;
}
.center > div {
height: 100%;
}
.content {
height: 700px;
}
HTML:
<div class="container">
<div class="table">
<div>
<div>XXX</div>
</div>
<div class="center">
<div>
<div class="content"></div>
</div>
</div>
<div>
<div>YYY</div>
</div>
</div>
</div>
Here is one possible solution:
<div class="container">
<div class="header">
<div>Top Header Block</div>
</div>
<div class="center">
<div class="content">
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div><!-- .content -->
</div><!-- .center -->
<div class="footer">
<div>Bottom Footer Block</div>
</div>
</div>
and the CSS:
.container {
height: 200px;
}
.header, .footer {
background-color: gainsboro;
}
.center {
height: inherit;
}
.content {
background-color: #F0F0F0;
height: inherit;
overflow: auto;
}
Since you are fixing the height of the container, you inherit the height both in the .center and the .content <div>'s.
If you tweak the container height, the center div expands but the header and footer div's stay the same height.
Use overflow on the content div to allow for scrolling.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/nae5z/
Your way was right, just make a few changes (See this Fiddle):
html, body, .container, .table {
margin: 0;
height: 100%;
}
#header,#footer {
height: 1px;
}
This should work because tables cells get increased in height if the content needs it.
Just a hint: You may improve the whole thing, for example I would use HTML 5 and the <header/> and <footer/> elements. But that was not part of your question. Anyway, here is another update to your fiddle:
<div>
<header>
<div>XXX</div>
</header>
<main>
<div>
<div class="content"></div>
</div>
</main>
<footer>
<div>YYY</div>
</footer>
</div>
With CSS:
html, body, body > div {
margin: 0;
height: 100%;
}
body {
background-color: gainsboro;
}
body > div {
display: table;
width: 100%;
}
body > div > * {
display: table-row;
}
body > div > * > div {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}
header, footer {
height: 1px;
}
main is very new to HTML 5, just if you're wondering.