I have an image, single character in a span (equal sign), and then a div where child elements are added/replaced via js.
However, I can't for the life of me figure out how to get it all aligned properly (fear I'm over thinking and complicating it.)
I'm using bootstrap's grid (row/col) system as well.
Something akin to...
<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp1" class="opensans inline" style="width: 50px;">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp2" class="opensans inline" style="width: 50px;">
<span class="opensans">X</span>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Wanting image centered middle along equal sign (vertical-align) as well as span within neighboring div (and the text in that span appearing just a few pixels off the bottom line.)
I saw this but none of the solutions are addressing the problem for me (I can only guess it is because of the third element and font, etc.)
UPDATE1: Edited sample html to correctly reflect the scenario in which the response-part.div is empty (initial state, possible transition state as user interacts with the page.) Updated fiddle
UPDATE2: I "fixed" the issue occurring with no child elements by adding an initial element in the initial html for the response-part, and then adding one back in when the user removes all other elements. A bit hackish, would appreciate a fix that didn't involve this workaround if possible. Updated fiddle
PS: I initially considered using bootstrap v4 (with flexbox support) but it is still alpha. Alternatively, I also looked into using FlexboxGrid, however I still need bootstrap for other features and FlexboxGrid uses similar classes ("row", etc) as bootstrap, which I assumed would cause name conflicts (if I included both in my project, eg: which "row" class would be used!)
Try using display: flex; on your response-part class. Something like this:
.response-part {
display: flex;
align-items: center;
}
I edited your fiddle. Take a look on it: https://jsfiddle.net/gusLnyyh/6/
I am using Zurb foundation and I am trying to create a css property that will be called and override the property float:right that they give the the last column. I know that they provide the end class to make you able to float a div on the left, but I have a case where I really have to make sure that my css property is the one to be called at the end.
code:
<div class="row">
<div class="my-class small-6 columns">floated on the right by foundation</div>
</div>
.my-class{
float:left;
}
the above code does not work, but it works when I add the important property which is something I want to avoid as well.
I found this question when dealing with dynamic content. In this case, I didn't know how many items I would ultimately have and didn't want to override foundations default behavior. The solution in this case was Foundation's block grid:
http://foundation.zurb.com/docs/components/block_grid.html
As an example, the way I initially tried to implement this was by wrapping each repeating element in a div with that amount of columns it should use like this:
<div class="row">
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div> <!-- Floated right. -->
</div>
Instead, the better way to do this is to use Foundation's block grid class, which specifies how many items should be in each row, like this:
<div class="row">
<ul class="small-block-grid-4">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li> <!-- Right where I expected it! -->
</ul>
</div>
Hopefully that help some fellow Googlers. :-)
In HTML/CSS, you need to make sure that your custom class is more specific than the class you're overriding and that your CSS is loaded after Zurb's CSS.
Zurb has the following class;
[class*="column"] + [class*="column"]:last-child {
float: right; }
Which means attribute class contains "column" and is last in parent. To be able to override this, try adding this to the end of your CSS file that is loaded after Zurb's and change the div to <div class="small-6 columns my-class">
[class*="my-class"]:last-child {
float: left;
}
Using CSS I am running into trouble getting a div later on the page to show up using the hover command over an img tag. I'm writing the page using Bootstrap 3 - Any idea why this may be a problem? The words in "hovershow" appear at the right spot on the page when they are not originally hiden using CSS which makes me think there's a problem with the command itself.
HTML
<div class="col-md-4 col-sm-4">
<img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>
CSS
.hovershow{
display:none;
}
#Email_Logo:hover .hovershow{
display: block;
}
That's definitely not how CSS works.
The following CSS implies there is an element .hovershow somewhere within #Email_Logo:
.#Email_Logo:hover .hovershow{
display: block;
}
And well... that's not the case. What you want can either be achieved by some easy Javascripting or a change in your HTML 'tree' and CSS.
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as
class="row navigation"
class="row footer"
I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.
Any poiinters much appreciated.
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.
<header>
This will span the full width of the page
</header>
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
<footer>
This will span the full width of the page
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
</footer>
What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.
<div class="row full-width"></div>
.row.full-width {
width: 100%;
max-width: 100%;
}
I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.
If you're using Zurb Foundation Framework, simply remove the row class and wrap the element in a class container that is 100% width. Now you probably want to center the stuff, use class centered like this:
<div class="container navigation">
<div class="centered">
Some navigation stuff
</div>
</div>
I completely disagree with the answer. You shouldn't have to use !important
Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/
You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.
Foundation 6 supports this feature naturally with row expanded. code example:
<div class="expanded row">
...
</div>
Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row
Use "Section" as in:
<section>
<div class="row">
<div class="small-12 columns">
</div>
</div>
</section>
Then, assign an ID to the section and use that for your background.
This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columns add padding.
For a true edge-to-edge, full width content, add this to your CSS.
.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }
Simply add .full class to a .row you wish to extend full width.
<div class="row full">
<div class="medium-6 column">This column touches Left edge.</div>
<div class="medium-6 column">This column touches Right edge.</div>
</div>
Just override the max-width property as max-width: initial;, for example,
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
<div class="row fullWidth"> </div>
this works for me :)
I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me).
As Foundation is using REM units, it would be best to alter .row class using them and by adding extra class, so you can have only selected rows full-width. For example by using .full class:
.row.full {
max-width: 80rem; /* about 90rem should give you almost full screen width */
}
You can see that it is used like this even in documentation page of Zurb Foundation (they altered .row class, though): http://foundation.zurb.com/docs/ (just look into page source code)
You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss
Just set the
$row-width: 100%;
http://foundation.zurb.com/forum/posts/927-full-width-layouts
I am not sure if I am missing something, but I had to add a .row div for the .centered to work. I can still style the .header to have a full width background in this case, but the .container method did not work for me.
<header class="header">
<div class="row">
<div class="centered">
Logo and stuff
</div>
</div>
<div class="row">
Some navigation stuff
</div>
</header>
If you don't give it the "row" class and put columns inside it works on a 100% width
If you're using sass, this is a better way:
<div class="row full-width"></div>
.row{
&.full-width{
width: 100%;
max-width: 100%!important; //might be needded depending on your settings
&>.column:first-child,
&>.columns:first-child{
padding-left: 0;
}
&>.column:last-child,
&>.columns:last-child{
padding-right: 0;
}
}
}
yes, just use like this:
<div class="large-12 columns">
<h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>
</div>
I'm getting troubles with this issue for a long time. I believe that it's a quite common problem for float layout and I wish someone would give a "standard" solution.
As title, the problem is about nested floats. Consider the following simple layout:
<div class='parent clearfix'>
<div id='child1' style='float:left; width:500px'>
{ ... child 1 content goes here ... }
</div>
<div id='child2' style='margin-left:501px;'>
{ ... child 2 content goes here ... }
</div>
</div>
Here clearfix is a common technique for auto clearing floated children. The problem is, the layout is broken if child2 contains another clearfix element. For example, if child 2 content is:
<div class='inside clearfix'>
<div class='sub1' style='float-left; width:100px'>
{ ... extra content goes here ... }
</div>
<div class='sub2' style='margin-left:101px'>
{ ... extra content goes here ... }
</div>
</div>
So generally, if we use clear:both inside a floated layout (inside the non-floated element), it also clears the parent container.
I know how to do it if using absolute position and a bit of js, but it's not a good practice.
How to fix it using float?
Thanks!
you can also use overflow: hidden;
<div class="wrapper">
<div class="float"></div>
<div class="float"></div>
</div>
.wrapper{
overflow: hidden;
}
.float{float: left;}
check demo on jsfiddle
While working with floats, i follow a simpler approach of using an extra div with class clear. This is much easier, understandable and less error prone.
Following is what i do :
<div class="parentClass">
<div class="float1">
. . .
</div>
<div class="float2">
. . .
</div>
<div class="clear"></div>
</div>
In CSS, the clear class is like following :
.clear { clear:both; overflow:hidden; }
You can try this approach and I am sure things will pane out good. Best of luck !