This image shows desired layout:
"Lorem ipsum" div is placed on top and "Dolor sit" div sits under it. Right "P" div sets minimal height (first part) of whole main wrapper section unless "Dolor sit" div increases height (second part).
Implementation is shown in this Plunker:
Plunker demonstration
<section id="wrapperMain" style="display:table; width:100%">
<div style="background-color:#2e3338; display: table-cell; min-width:50px; width:50px;">
<h1 style="margin-left:25%; margin-right:25%">P</h1>
</div>
<div style="background-color:dodgerblue; display: table-cell;">
<!--This section should fill its parent: dodgerblue div-->
<!--So no blue color could be seen above "Lorem ipsum" div-->
<section style="display:table; width:100%; background-color:crimson; margin-top:0;">
<div style="display:table-row">
<div style="background-color:darkslategray;">Lorem ipsum</div>
</div>
<div style="background-color: #1c1e22; border-style: none; resize: none; width: 100%;">Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit </div>
</section>
</div>
And with any combination of setting margins, heights, displays I wasn't able to dock 2nd table section inside table cell without margin on top. Right now I'm not sure if this is correct approach.
I think this is what you are after, you just need to add vertical-align:top to the table cell on the right
I have also fixed your second table styles as you had block mixed with table-rows and no table-cells which may cause issues for some browsers:
<section id="wrapperMain" style="display:table; width:100%">
<div style="background-color:#2e3338; display: table-cell; min-width:50px; width:50px;">
<h1 style="margin-left:25%; margin-right:25%">P</h1>
</div>
<div style="background-color:dodgerblue; display: table-cell; vertical-align:top"> <!-- add vertical align:top here -->
<!--This section should fill its parent: dodgerblue div-->
<!--So no blue color could be seen above "Lorem ipsum" div-->
<section style="display:table; width:100%; background-color:crimson; margin-top:0;">
<div style="display:table-row">
<div style="background-color:darkslategray; display:table-cell">Lorem ipsum</div>
</div>
<div style="background-color: #1c1e22; border-style: none; resize: none; width: 100%;display:table-row;">
<div class="display:table-cell">Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit</div>
</div>
</section>
</div>
</section>
Related
How can i make my div background height at 100% depending on the height of it parent :
that's what i have for now :
and i want to fill all the space with the red color with the background color:
this is my HTML code :
<div class="row" style="margin-bottom: 20px">
<div class="col-6"><img style="width: 100%" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg"></div>
<div class="col-6 class1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg" style="width:100%">
</div>
</div>
and that's my css :
.class1{
background-color: yellow;
height: 100%;
}
and thanks for help :-)
Please refer to below link:
https://jsfiddle.net/ulric_469/7mh4vs6p/6/
add height 100% to the image
.row {
display: flex;
align-items: stretch;
}
.row > div {
flex: 1
}
Using Twitter-Bootstrap, I have a section of a page that includes a sidebar (which does not take up the whole page, just spans down to the bottom of this section). I have several sections to the right of the sidebar, each of which contain an image on one side, some text on the other, and require a bottom-border.
I'm having trouble with the bottom-border. Since each section is contained in a div, and everything's floated using Bootstrap columns, the divs are 0 height and the borders all float to the top.
EDITED for clarification: I need two distinct columns in this section - a left-hand one (spanning 3 columns) that contains only the sidebar (and takes up the 3 columns all the way to the bottom, leaving blank space after the list), and one (spanning the remaining 9 columns) that contains the story-sections but that stays on the right-hand side of the page.
EDITED to include image (grey lines are included for reference and will not show up on the page, black lines are the borders I'm trying to apply)
Attempted solutions:
Bottom-border on individual elements: I need one solid line across the bottom of each section, so I can't apply bottom-border to both the image and the text.
Clearfix: Since I have this sidebar, I can't use a clearfix, because it pushes everything down past the sidebar.
Overflow: Using overflow causes the images to shrink (which I don't quite understand, but it doesn't help with the border either).
How can I create bottom borders for each of these sections?
<section class="stories">
<div class="container">
<h2>Section header</h2>
<div class="col-sm-3 sidebar">
<h6>list of stories</h6>
<ul>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ul>
</div>
<section class="story-section">
<div class="col-sm-3">
<img src="http://placehold.it/330x220">
</div>
<div class="col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</section>
// (there are three more sections with the same class of "story-sections", plus other code on the page, but I've tried to simplify it as much as possible here.)
</div>
</section>
css:
html, body {
height: 100vh;
}
.stories {
.sidebar {
height: 100vh;
}
.story-section {
border-bottom: 1px solid $grey;
}
}
I'm still fairly new with Bootstrap, so there may be a very simple solution, but I haven't been able to track it down. Any help is very welcome!
if you want to have a sidebar with 3 columns + a left section with the remaining 9 columns, then you need to set col-*-9 in your story-section
Note: in bootstrap, you need to have .row right below .container or between nested col-*
html,
body {
height: 100vh;
}
.sidebar {
height: 100vh;
background: lightblue
}
.story-section {
border-bottom: 1px solid grey;
}
img {
margin-top: 10px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="stories">
<div class="container">
<div class="row">
<h2>Section header</h2>
<div class="col-xs-3 col-sm-3 sidebar">
<h6>list of stories</h6>
<ul>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ul>
</div>
<section class="story-section col-xs-9 col-sm-9">
<div class="row">
<div class="col-xs-6 col-sm-6">
<img class="img-responsive" src="http://placehold.it/330x220">
</div>
<div class="col-xs-6 col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</div>
</section>
<section class="story-section col-xs-9 col-sm-9">
<div class="row">
<div class="col-xs-6 col-sm-6">
<img class="img-responsive" src="http://placehold.it/330x220">
</div>
<div class="col-xs-6 col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</div>
</section>
</div>
</div>
</section>
I am attempting to show a thumbnail picture and below the thumbnail, I want to have some text. Ideally I think I want to wrap the image and the text in a div whose style is set to be inline.
So imagine 3 pictures going across the screen from left to right and underneath each picture is a description of the picture.
How do I accomplish that?
Im with seb nukem here. I would use display inline-block.
One way you could do this is by enclosing each image and description pair within a div element and then just floating those divs to the left.
DEMO: http://codepen.io/sajadtorkamani/pen/xbbrzE
HTML
<div class="gallery">
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
</div>
CSS
.gallery div {
float: left;
margin-right: 1em;
}
Put each image + caption within an inline or floating block:
CSS
div.image {
display:inline-block; /* or use float:left; */
}
.caption {
}
HTML
<div class="image"><!-- one div per image -->
<img src="image.png">
<div class="caption">Caption text here</div>
</div>
<div class="image">
<img src="image2.png">
<div class="caption">Caption text here</div>
</div>
...
demo: http://jsfiddle.net/5s5s4otc/
I would use the HTML <table> element. Try something like this:
table {
width: 100%;
}
td {
text-align: center;
}
<table>
<tr>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
</tr>
<tr>
<td>Description goes here.</td>
<td>Description goes here.</td>
<td>Description goes here.</td>
</tr>
</table>
I hope this helps! Leave a comment below if you need additional help.
DEMO: http://jsfiddle.net/pwee167/67oc6k7r/\
The outcome will be something like this:
HTML:
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
CSS:
.container
{
float: left;
max-width: 128px;
}
Note: I assumed the dimensions of your thumbnails will be the same (as is in most use cases of thumbnails), which allowed me to set the maximum width (using max-width) of the container holding the image and the description. This will prevent the text from overflowing, and expanding the container.
Use either float or inline-block on the container divs. See jFiddle here: http://jsfiddle.net/ckk2jprr/
HTML
<div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
</div>
CSS
.pic{
float: left;
}
We have a fix set of CSS rules, but when we modify the HTML markup to include a canvas, a weird padding appears on the neighboring cell. Here is the CSS:
.wrap{
width:100%;
display: table;
}
.row {
display: table-row;
}
.left{
width: 100px;
display: table-cell;
background-color: #0f0;
}
.right{
background-color: #f00;
display: table-cell;
}
Normal case:
See the fiddle here. Note the position of the text in the red cell: top, aligned with the top of the cell.
<div class="wrap">
<div class="row">
<div class="left">
Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Canvas case:
See the fiddle here. We swapped the Lorem text in the left cell for a 90x90 canvas. See how the text on the red cell is now aligned with the bottom of the canvas and a padding is applied to the cell.
<div class="wrap">
<div class="row">
<div class="left">
<canvas width='90px' height='90x'></canvas>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Question: Could you explain why this padding appears on the left cell, and if this is an expected behavior? Also, could you propose a solution that gets rid of this 'bug'?
I have the following markup:
<div id="container">
<div id="sidebar">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div id="main">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
And following styles:
#sidebar {
background: #e3e3e3;
float: left;
}
#main {
background: #666;
}
I was expecting div with id sidebar to go on top and hide div with id main. My logic is - div with id sidebar is floated and is removed from normal flow thus div with id main should take its position. But all browsers display div with id main right below div with id sidebar as if there was no float.
You need to clear float after #sidebar.
HTML:
<div id="sidebar">
....
</div>
<div class="clr"></div>
<div id="main">
....
</div>
CSS:
.clr{clear:both;}
DEMO here.