I have two div's in one wrapper div, see the following situation:
<div class="container">
<div style="display:table;" class="row row-mobile fp-white-row">
<div style="display:table-cell;" class="col-sm-6 portfolio-post-l">
<h1><?php the_field('port_kop_linker_kolom'); ?></h1>
<?php the_field('port_inhoud_linker_kolom'); ?>
</div>
<div style="display:table-cell;" class="col-sm-6 portfolio-post-r">
<h1><?php the_field('port_kop_rechter_kolom'); ?></h1>
<?php the_field('port_inhoud_rechter_kolom'); ?>
</div>
</div>
</div>
I would like portfolio-post-l to be the same height as portfolio-post-r and the other way around if necessary. How can I accomplish this? it is needed because the portfolio-post-l has an border and should stretch to the bottom of the wrapper div row row-mobile fp-white-row.
I know a solution is to give the portfolio-post-r a left border, but what if the right border becomes the shortest div? I need to ensure it works both ways no matter who's the taller div.
Here an image of my current layout
I have searched online for about an hour and couldn't find any simple solution, all had to do with JS or display:table that did not work for me.
Is it really that inconvenient to include this functionality?
thanks!
EDIT 01
I have no CSS applied to my .portfolio-post-l & .portfolio-post-r other then a background color and a border. However, Bootstrap applies CSS to the col-sm-6, here's that CSS:
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
I just found out, thanks to Krzysiek that col-sm-6 is messing up the table display fix. If I remove that class, it works, however, I would like to keep it because it's a Bootstrap class used for laying out the page....
Here's a Fiddle of my layout
I think it has to do with positioning, anybody any suggestions?
Thanks!
/Edit 01
Related
one take col-md-4, second col-md-8, but the second with a picture is not 100% width, there are gaps on the left and right sides, could anyone please advise how to remove gaps and make image full size ? Thanks. Here is screenshot
.upperDiv{
height: 100px;
width: 100%;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
.fixed-content {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="container">
<div class="row upperDiv">
<div class="col-md-4" style="background: #005AA1;">
</div>
<div class="col-md-8">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Bootstrap put that padding for you to better align your content, you can remove it by inserting p-0 (padding = 0px) class name as I remember
<div class="container">
<div class="row upperDiv">
<div class="col-md-4 p-0" style="background: #005AA1;">
</div>
<div class="col-md-8 p-0">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Looking at your HTML, you are using bootstrap's grid system (hinted by the col-md-X classes). The gap you see in your example is caused by the padding applied to the cells of the grid system to create the gutter.
You have two possibilities:
You put the picture as a background instead, since padding is part of the element, the picture will cover this space too.
You remove the gutter.
1 is pretty self explanatory so I'll go straight to two. You can read about the .no-gutter helper class. It needs to be applied to a row and will effectively remove all gutters for the columns in it. But that means you'll loose the gutter on your left column too. You could also remove the padding with a custom class that sets padding-left:0 !important;padding-right:0 !important; This will effectively remove the gutter for the specified column element.
Whatever the option you choose, remember that cols are not meant to be used directly for the styling. They are here to help you create columns in which to put your visual elements. Although I pointed 3 different approaches to your problem, the only "pure" solution is to use the .no-gutter. Others might have weird visual impacts such as making the gutter effectively only half wide (since the left col participates in half the gutter too) and will not look right if there are other columns near it.
I've designed a layout in PS, using a 12 column grid, and want to make it work in Wordpress.
I'm using Reverie theme to start with, wich is a framework theme thingy that works on Foundation.
I got my header working like it should, but the content below it wont adjust to the screen size.
Ill post the code I have below:
page.php:
<?php get_header(); ?>
<div class="container">
<!-- Row for main content area -->
<div class="large-12 medium-12 small-12 columns" id="content" role="main">
<div id="top-content" class="large-12 medium-12 small-12">
</div> <!-- end top-content">
<footer>
<center><p class="copy">© <?php echo date('Y'); ?> Roelof Plas. Ontwerp door <span class="roelof">roelofplas.nl.</span> Alle rechten voorbehouden.</p></center>
</footer>
</div>
</div>
<?php get_footer(); ?>
style.css:
#top-content {
width: 1140px;
height: 530px;
background-color: #63bcb8;
z-index: 1000;
top: -48px;
position: absolute;
}
What it's supposed to look like (just the turquase div):
I can't post images yet (need 2 more rep) so click this.
Live version: click me
Please tell me what I'm doing wrong. I read a ton of tutorials about Foundation and grids etc, but I can't get it right.
If you need more info from me or anything please tell me.
Regards,
Roelof Plas
SOLUTION BY Joel, thanks mate! Can't rep u yet but I will when I can! :D
Remove the "width: 1140px;" from your #top-content class, the .columns and .large-12, .medium-12 etc from foundation will take care of the responsiveness.
The reason your footer isn't showing up is two fold: One, you should replace position:absolute on #top-content with #position:relative. Using position:absolute takes the DIV out of the DOM flow and causes your footer to hide 'behind' it.
You also have an unclosed comment:
end top-content"> should be end top-content -->
With those changes your footer should then show up correctly and the main turquoise DIV will become responsive.
> You haven't used "columns" class on this.
> You don't required any kind of width when you applying "-12" in every class.
> And if you still willing to provide height on this **ID** "#top-content". then use media query to give width on every other size.
<div id="top-content" class="large-12 medium-12 small-12">
I've not thought about this massively and I'm probably missing something very obvious but how does one properly apply background colours to '.row'
The code I've been using:
<div class="row">
<div class="col-lg-4 white-flood">
</div>
</div>
However this only applies to columns. I've tried wrapping them in a div, applying the style to the .row class among other things
Thanks :)
EDIT:
This should help people find out what my issue is (applying to .row should do the trick but something in my code is stopping it from working). The 4 thumb links should have awhite background.
Click here for site
Two options:
1) Set the background color to the row:
<div class="row white-flood">
<div class="col-lg-4"></div>
</div>
2) You need to use table layout
<div class="row" style="display: table">
<div class="col-lg-4 white-flood" style="float: none; display: table-cell"></div>
</div>
But this will slightly break the bootstrap design, as the table cant have a negative margin.
Added position: relative to my flood class and it worked...
I believe it is something to do with my responsive background intefering.
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.