I'm having an issue aligning my elements.
I have elements that are appearing inside the others, like for example my paragraph with red background is above my image, and my second article is above my first article.
I have already tried many tests with floats but it's not working.
Do you see where the problem is?
Here is an example showing my problem:
http://jsfiddle.net/2tsmX/3/
My html:
<div id="body_news">
<div id="body-news1">
<h1>News</h1>
<article id="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Títule Of the News</a></h2>
<span>Date of the news</span>
<p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
<article id="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Títule Of the News</a></h2>
<span>Date of the news</span>
<p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
</div>
</div>
My css:
#body_news1
{
float:left;
width:480px;
}
#body_news1 h1
{
font-size:25px;
font-weight:100;
margin-bottom:10px;
}
.img_container
{
width: 160px;
height: 165px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
margin-right:20px;
border:3px solid #f3f3f3;
margin-top:4px;
}
#body_news
{
width:480px;
height:auto;
margin:0 auto 0 auto;
}
#news
{
margin-bottom:5px;
position:relative;
background:yellow;
width:480px;
text-align:left;
}
#news h2 a
{
font-size:20px;
color:#000;
text-decoration:none;
margin-left:0;
}
#news span
{
font-size:14px;
}
#news p
{
margin-top:5px;
margin-bottom:5px;
background:red;
}
Are you trying to do something like this?
HTML
<div id="body_news">
<div id="body-news1">
<h1>News</h1>
<article class="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Title Of the News</a></h2>
<span>Date of the news</span>
<p>
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
<article class="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Title Of the News</a></h2>
<span>Date of the news</span>
<p>
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
</div>
</div>
CSS
#body_news1
{
width:480px;
}
#body_news1 h1
{
font-size:25px;
font-weight:100;
margin-bottom:10px;
}
.img_container
{
width: 160px;
height: 165px;
float: left;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
margin-right:20px;
border:3px solid #f3f3f3;
margin-top:4px;
}
#body_news
{
width:480px;
margin:0 auto 0 auto;
}
.news
{
margin-bottom:5px;
background:yellow;
min-height:185px;
}
.news h2 a
{
font-size:20px;
color:#000;
text-decoration:none;
margin-left:0;
}
.news span
{
font-size:14px;
}
.news p
{
margin-top:5px;
margin-bottom:5px;
background:red;
}
http://jsfiddle.net/2tsmX/9/
Simple fix - Add <div style="clear:both;"></div> after the <span>Date of the news</span>
of each div
Example:
<div id="body_news">
<div id="body-news1">
<h1>News</h1>
<article id="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Títule Of the News</a></h2>
<span>Date of the news</span>
<div style="clear:both;"></div> <!--HERE-->
<p>
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
<article id="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Títule Of the News</a></h2>
<span>Date of the news</span>
<div style="clear:both;"></div> <!--HERE-->
<p>
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
</div>
</div>
FIDDLE
Related
Edit: I figured out the issue: shape-outside needs to be sibling, and not child, of the item that it wants to affect. I decided to rewrite the section as a grid (as recommended in the comments, thanks AH!). Codepen is updated in case someone is curious. Each element of the grid is now a placeholder, and it contains each triangle div. Inside each triangle div there is the shape-outline styled div, and a simple p element with the text. Playing with horizontal margins of grid elements it works. Not the most elegant, but it's a solution.
Heyo! I've been working on this for quite a bit, but can't quite seem to make it work.
I am trying to build this tangram-like grid, and I'd like to wrap text inside each triangle. I found some solutions using shape-outside, but since I'm using display:flex to the parent div, that does not quite apply to my case I believe. Open to considering grid-based solutions or different design altogether, if that makes it easier.
Codepen
How it works: 6 rows with 4 elements each, all even lines moved 100% up so to be at the same level as the previous odd line, triangles realized with clip-path pointing in each of the four possible directions. Any help is more than welcome!
#edu-grid {
height: 700px;
width: 90%;
}
.edu-row {
height: 33%;
width: 100%;
}
.edu-item {
height: 100%;
width: 25%;
border: 1px solid black;
}
.edu-top-left {
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.edu-top-right {
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.edu-bottom-right {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.edu-bottom-right-shape {
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
height: 100%;
width: 100%;
float: left;
margin: 0;
}
.edu-bottom-left {
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.edu-bocc {
background: blue;
}
.edu-blank {
background: black;
}
.edu-mcg {
background: red;
}
.edu-whu {
background: green;
}
.edu-upb {
background: yellow;
}
.edu-up {
margin-top: -231px;
}
.flex {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
<div id="edu-grid">
<div id="edu-1" class="flex edu-row">
<div class="edu-item edu-blank edu-top-left">a</div>
<div class="edu-item edu-bocc edu-top-left">a</div>
<div class="edu-item edu-blank edu-top-right">a</div>
<div class="edu-item edu-mcg edu-top-left">a</div>
</div>
<div id="edu-2" class="flex edu-row edu-up">
<div class="edu-item edu-bocc edu-bottom-right"></div>
<div class="edu-item edu-bocc edu-bottom-right"><div class="edu-bottom-right-shape"></div><div><p>a</p></div></div>
<div class="edu-item edu-bocc edu-bottom-left">a</div>
<div class="edu-item edu-mcg edu-bottom-right">lorem ipsum etc etch</div>
</div>
<div id="edu-3" class="flex edu-row">
<div class="edu-item edu-bocc edu-top-right"></div>
<div class="edu-item edu-bocc edu-top-right"></div>
<div class="edu-item edu-bocc edu-top-left"></div>
<div class="edu-item edu-mcg edu-top-right"></div>
</div>
<div id="edu-4" class="flex edu-row edu-up">
<div class="edu-item edu-blank edu-bottom-left"></div>
<div class="edu-item edu-bocc edu-bottom-left"></div>
<div class="edu-item edu-blank edu-bottom-right"></div>
<div class="edu-item edu-whu edu-bottom-left"></div>
</div>
<div id="edu-5" class="flex edu-row">
<div class="edu-item edu-upb edu-top-right"></div>
<div class="edu-item edu-upb edu-top-left"></div>
<div class="edu-item edu-whu edu-top-right"></div>
<div class="edu-item edu-whu edu-top-left"></div>
</div>
<div id="edu-6" class="flex edu-row edu-up">
<div class="edu-item edu-upb edu-bottom-left"></div>
<div class="edu-item edu-upb edu-bottom-right"></div>
<div class="edu-item edu-whu edu-bottom-left"></div>
<div class="edu-item edu-whu edu-bottom-right"></div>
</div>
</div>
I have just seen the recent edits you have made.
I had a slightly different idea so add it here in case of use.
The whole thing is a grid and this snippet does not introduce the idea of flexed rows.
The items in the grid are placed using the grid-column/grid-row system and so there can be two items in a grid. each is a Tetris type triangle.
If there is no triangle piece somewhere (e.g. the first cell of the grid has only one piece) then no piece is put in that position so we can see the background of the grid rather than pretend there is a piece there.
* {
margin: 0;
}
.container {
background-color: black;
height: 100vmin;
aspect-ratio: 4 / 3;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px;
--so0: polygon(0 0, 100% 0, 0 100%);
--so1: polygon(0 0, 100% 0, 100% 100%);
--so2: polygon(100% 0, 100% 100%, 0 100%);
--so3: polygon(100% 100%, 0 100%, 0 0);
position: relative;
font-size: 3vmin;
}
.container>* {
z-index: 1;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
color: white;
background-color: var(--bg);
clip-path: var(--cp);
overflow: hidden;
}
.container>*>*:first-child {
width: 100%;
height: 100%;
float: var(--fl);
shape-outside: var(--so);
z-index: -1;
}
.bottomright {
--so: var(--so0);
--fl: left;
--cp: var(--so2);
}
.topleft {
--so: var(--so2);
--fl: right;
--cp: var(--so0);
text-align: right;
}
.bottomleft {
--so: var(--so1);
--fl: right;
--cp: var(--so3);
text-align: right;
}
.topright {
--so: var(--so3);
--fl: left;
--cp: var(--so1);
}
.container>*>*:last-child {
padding: 5px;
}
.blue {
--bg: blue;
}
.red {
--bg: red;
}
.green {
--bg: green;
}
.yellow {
--bg: yellow;
color: black;
}
.row1 {
grid-row: 1;
}
.row2 {
grid-row: 2;
}
.row3 {
grid-row: 3;
}
.col1 {
grid-column: 1;
}
.col2 {
grid-column: 2;
}
.col3 {
grid-column: 3;
}
.col4 {
grid-column: 4;
}
<div class="container">
<div class="blue row1 col1 bottomright">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue row1 col2 topleft">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue row1 col2 bottomright">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue row1 col3 bottomleft">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="red row1 col4 topleft">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="red row1 col4 bottomright">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topright blue col1 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue topleft row2 col2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright blue col2 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue topleft col3 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="green topleft col4 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright red col4 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topleft yellow col1 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright yellow col1 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topleft yellow col2 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright yellow col2 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topleft green col3 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright green col3 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topleft green col4 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright green col4 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
The current design based on tables looks like this (the pictures are of the different size and ratio; the goal is to make all the imgs and text fit on same line and resize pictures preserving the ratio):
<style>
table td, table td *
{
vertical-align: top;
}
img
{
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
</style>
<table style="width: 100%;">
<tr>
<td>
<table>
<tr>
<td>
<img src="Pics/m51_1.jpg" />
</td>
<td>
text text text text text text text text text text text text text text text text
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<img src="Pics/hubble.jpg" />
</td>
<td>
text text text text text text text text text text text text text text text text
</td>
</tr>
</table>
</td>
</tr>
</table>
And my straightforward attempt to convert it to flex-box design is the following:
<style>
div
{
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
img
{
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
</style>
<div style="width: 100%;">
<div>
<img src="Pics/m51_1.jpg" />
text text text text text text text text text text text text text text text text
</div>
<div>
<img src="Pics/hubble.jpg" />
text text text text text text text text text text text text text text text text
</div>
</div>
Unfortunately, it doesn't work properly in all the major browsers (different bugs in Chrome, FF and Edge). Any ideas how to make it work?
Try this
.container
{
display: flex;
flex-direction: row;
}
.box{
display:flex;
flex-direction:row;
}
.img, .text{
flex: 1 1 0px;
}
img{
width:100%;
}
<div class="container">
<div class="box">
<div class="img">
<img src="https://picsum.photos/536/354" />
</div>
<div class="text">
text text text text text text text text text text text text text text text text
</div>
</div>
<div class="box">
<div class="img">
<img src="https://picsum.photos/536/354" />
</div>
<div class="text">
text text text text text text text text text text text text text text text text
</div>
</div>
</div>
I think this is close from what you needs, hope it help.
<style>
div
{
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content:
}
.image-container{
width:30%;
height:100%;
position:relative;
}
.image-container img
{
width: 100%;
position:absolute;
top:0;
left:0;
}
</style>
<div style="width: 100%;">
<div style="width:50%">
<div class="image-container">
<img src="https://image.shutterstock.com/image-vector/example-signlabel-features-speech-bubble-260nw-1223219848.jpg" />
</div>
<p style="width:70%">text text text text text text text text text text text text text text text text </p>
</div>
<div style="width:50%">
<div class="image-container">
<img src="https://image.shutterstock.com/image-vector/example-signlabel-features-speech-bubble-260nw-1223219848.jpg" />
</div>
<p style="width:70%">text text text text text text text text text text text text text text text text </p> </div>
</div>
basically what you need to do is make sure 2 image and 2 text per row, so that means each box is 25% width, then you need to make the flexbox wrap its content, and make it aligned to top
.flex{
display: flex;
align-items: flex-start;
flex-flow: row wrap;
}
.flex-item{
flex: 1 25%;
}
.flex-item.text{
padding: 0 10px;
box-sizing: border-box;
}
.flex-item img{
width: 100%;
}
<section class="flex">
<div class="flex-item">
<img src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
<div class="flex-item text">
text text text text text text text text text text text text text text text text
</div>
<div class="flex-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg">
</div>
<div class="flex-item text">
text text text text text text text text text text text text text text text text
</div>
<div class="flex-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg">
</div>
<div class="flex-item text">
text text text text text text text text text text text text text text text text
</div>
<div class="flex-item">
<img src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
<div class="flex-item text">
text text text text text text text text text text text text text text text text
</div></section>
I am trying to set cards with information in columns. As the texts displayed have different lenghts, I want to fixed the possition of the Learn More button related to the end of the card, so no matter what comes before, the buttons are always aligned.
Furthermore, I want to separate the cards between rows, but I haven't been able to find a solution yet, because if I change margins it only applies in the last row.
Here is my code:
<div class="row my-flex-card">
<div class= "col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body inline-block">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
<a class="btn btn-success" href="#!/women/details/{{woman._id}}">Learn more</a>
</div>
</div>
<!--/.Card-->
</div>
</div>
My CSS:
.my-flex-card > div > div.card {
height: calc(100% - 15px);
margin-bottom: 15px;
}
.row {
margin-bottom: 50px;
}
That .row feature isn't working.
This is how my website looks like right now:
Thank you :)
.parent {
display: flex;
flex-direction: row;
padding: 10px;
}
.parent .child {
padding-right: 10px;
flex-grow: 1;
width: 33%;
position:relative;
}
.parent .child .content {
height: 100%;
box-shadow: 0 0 1em gray;
}
.content img{
background-size:cover;
width:100%;
}
.content h3,p{
padding:10px;
}
.content input{
position:absolute;
bottom:5px;
margin-left: 35%;
margin-top:10px;
}
<div class="parent">
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 3</h3>
<p>text text text text text text text text text text text text text text text text text text text</p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 2</h3>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex </p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 1</h3>
<p>text text text text text text text text text text text text tex</p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
</div>
make the box class with position relative :
.boxClassName{
position:relative
}
then make the button class with the following :
.buttonClassName{
position:absolute;
bottom:0;
}
I have this html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article style="border-left:1px solid #000;" class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
I want to add a vertical line between the columns that stretches all the way from the top of the card to the bottom.
adding the border:... style wont help as there is padding to the card class.
creating an element with the position:absolute doesn't help as this is a responsive page and everything needs to be dynamic
After searching around I haven't found any good pre made solutions so what I did was create a background image from the linear-gradient and set a background position made of percentage to make it dynamic as so:
.card{
background-color: #fff;
background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: linear-gradient(180deg, transparent, #ccc, transparent);
background-position: 65%;
background-repeat: repeat-y;
background-size: 1px 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card" style="background-color: #fff;background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);background-image: linear-gradient(180deg, transparent, #ccc, transparent);background-position: 65%;background-repeat: repeat-y;background-size: 1px 1px;">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
updated answer with pseudo element:
.card-section {
position:relative;
}
.small-4:before {
content:'';
position:absolute;
top:0;
bottom:0;
border-right:solid;
margin-left:-0.75em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
Edit
You can also override fondation CSS to get rid of float at first and then and reset display:
display:flex (do not care if child are floating)
.row {
display:flex;
}
.row :last-child {/* last cells chosen for demo cause shorter in content */
border-left:solid;
/* Demo purpose : see me */
background:lightgray
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
display:table + float:none; because float kills display :(
.row {
display:table;
width:100%;
}
.card .card-section .row > article.columns {
display:table-cell;
float:none;/* else display is killed */
}
.row :last-child {/* shortest chosen for demo, you could select first-child or .small-4 */
border-left:solid;
/* Demo purpose : see me */
background:lightgray
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
display:grid .... well maybe in the futur and then flex will be fully efficient with less CSS to write . BTW, display:table is to include eventually oldish browser that do not accept the flex model
I am working on a site, of which has to have a description section. I am trying to achieve this by having two Bootstrap columns, one sized 8 and then another sized 4 to make sure it is equal to 12. Then in the column which is 8, I want to have two columns inside, to achieve one column of text on the left and then a second column of text on the right.
There is just a problem, as it doesn't seem to be working and whenever I try to do this, it just creates a second column underneath the first one inside of the 8 column.
I have attached an image to make it easier to see what I got and what I am trying to achieve. Any help is much appreciated.
Image of current situation:
What I am trying to achieve:
.partLineDesc{
margin-top: 30px;
text-align: center;
}
.leftContDesc{
margin-top: 20px;
background-color:grey;
}
.rightContDesc{
background-color:grey;
margin-top: 20px;
}
.cottonImg{
margin-top: 15px;
text-align: left;
}
.partLineDesc2{
margin-top: 20px;
text-align: center;
}
.securInfo{
margin-top: 30px;
text-align: center;
background-color:#eff4f9;
border-radius: 10px;
border: 2px solid #dddddd;
padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-8">
<div class="partLineDesc">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
<div class="leftContDesc">
<div clas="col-md-6">
<p>text text text text text text text text text text text text
<br>text text text text text text text text text text text text
</p>
<img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
</div>
</div>
<div class="rightContDesc">
<div clas="col-md-6">
<p>text text text text text text text text text text text text
<br>text text text text text text text text text text text text
</p>
</div>
</div>
<div class="partLineDesc2">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
<div class="col-md-4">
<div class="securInfo">
</div>
</div>
</div>
Your left and right DIV's wrap the Bootstrap col-md-6 columns so they no longer float next to each other. Also, always put nested col-*s inside another row so the padding is correct..
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="partLineDesc">
<img />
</div>
<div class="row">
<div class="col-md-6">
<div class="leftContDesc">
<img />
</div>
</div>
<div class="col-md-6">
<div class="leftContDesc">
<p>
</p>
</div>
</div>
</div>
<div class="partLineDesc2">
<img/>
</div>
</div>
<div class="col-md-4">
<div class="securInfo">
</div>
</div>
</div>
</div>
Demo: http://codeply.com/go/yRQum3xKKY
It seems your bootstrap columns are all over the place.
You really need to wrap everything you're trying to split into columns into an overhead div that way you're saying that your main container is taking up 12 columns of that grid then you decide which of those 12 the inside columns need to take up.
Quick mock-up below.
---
.partLineDesc{
margin-top: 30px;
text-align: center;
}
.leftContDesc{
margin-top: 20px;
background-color:grey;
}
.rightContDesc{
background-color:grey;
margin-top: 20px;
}
.cottonImg{
margin-top: 15px;
text-align: left;
}
.partLineDesc2{
margin-top: 20px;
text-align: center;
}
.securInfo{
margin-top: 30px;
text-align: center;
background-color:#eff4f9;
border-radius: 10px;
border: 2px solid #dddddd;
padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-8">
<div class="partLineDesc">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="leftContDesc col-sm-4 col-md-4 col-lg-4">
<p>
text text text text text texttext text text text text text
<br> text text text text text texttext text text text text text
</p>
<img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
</div>
<div class="rightContDesc col-sm-4 col-md-4 col-lg-4">
<p>
text text text text text texttext text text text text text
<br> text text text text text texttext text text text text text
</p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="securInfo">
</div>
</div>
</div>
<div class="partLineDesc2">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>