I have a 3-column layout that works pretty well:
http://jsfiddle.net/nicorellius/YNyHW/7/
My goal is to add a pre-existing modular unit into the center div, the one with class two-inner. The markup is like so:
<html>
<head></head>
<body>
<div>
<div class="container">
<div class="one">
<div class="one-inner"></div>
</div>
<div class="two">
<div class="two-inner"></div>
</div>
<div class="three">
<div class="three-inner"></div>
</div>
</div>
</div>
</body>
</html>
The CSS can be seen in the fiddle. Part of the modular unit is actually built from some PHP where some data from a database is fetched and displayed. I have some arrays that I'm using for testing that mimic 6 entries and gives the modular unit a 2-wide by 3-tall box layout. My problem is that when I add this unit into the layout above, I get something like the test site below.
The markup for the modular unit is like so:
<section class="unit">
<section class="buttons margin-top-2em">
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 1</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 2</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 3</button>
</div>
</section>
<div class="row">
<?php // loop through some arrays to get module unit ?>
</div>
</section>
I've tried various tweaks to try and get it up but the only thing that does it is making the heights of the outer classes one, two, and three close to zero.
Although I've tried changing heights and other bits to get it to fit, I'm still having trouble figuring out why that center div won't go up. What am I missing?
The CSS for the unit class is in the fiddle. On it's own, it works OK, and I have some breakpoints that collapse it down into a single column. I just cant get passed this part...
EDIT
After trying some ideas from #kozlovski5, I am able to get the divmoving up and down as I need. But there is something going on that is making me uneasy. I'm not too familiar with the display: table, display: table-cell layout so Im sure I'm missing something. For example, when I add text to the divs in question, either the classes one, two, or three, or the inner classes, the adjustments recommended by #kozlovski5 go away. So in other words if I don't use top: -37.5em; and just fill the divs with text, everything seems to work as it should. It's when I try to model the layout with bordered sections that I get the strange behavior.
I ended up going with floats instead. See test site above for final.
I applied:
div > .modular {
display: block;
}
This seems to solve the problem. Here is an updated jsFiddle. http://jsfiddle.net/YNyHW/4/
OP has provided a test case for his website, so my updated answer is:
.two-inner {
background-color: #cba;
border: 1px solid gray;
display: block;
width: 100%;
height: 100%;
position: relative;
top: -596px;
left: 0;
}
Ugghhh.. Another Edit
I think the whole display: table and div > div. { display: table-cell;} is causing this issue and instead of working on patches let's hit the problem head straigh on instead of working on fixes.
Just get rid of the display table etc. And use floats instead here is an example:
http://jsfiddle.net/YNyHW/6/
Related
I am creating a web page and wanted to use a system similar to foundations/ bootstrap with defined columns and rows. I am happy with what I have so far, however I am not sure how I can center a column within a row, while still using a defined grid system.
I know usually the html is formatted like this:
<div class="column column-6 center">
http://codepen.io/Kiwimoose/pen/dpvEqO
Is what I have so far,
I am just not sure how the "center" tag is usually formatted in foundations. I would like to have the column in the second row centered, as well as others in the future.
Your code is OK, you just have to change the order in CSS:
.column {
position: relative;
float: left;
display: block;
}
.center {
margin:auto;
float:none;
}
Style .center class after . column class and it will work.
BTW, it is a good idea to clean up your code a little bit.
Try
<div align="center">
And then you can customize it in the css that you're doing
In Zurb foundation you can use "-offset-" and "end" class names,
for example
<div class="row">
<div class="large-6 large-offset-3 end columns">6 centered</div>
</div>
docs here
to center properly (with no headaches) with Twitter Bootstrap you can simply set empty divs as follows:
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
centered div in all resolutions
</div>
<div class="col-xs-3"></div>
</div>
Or you can use offset too
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/
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 have this html:
<div class="speaker-list">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">
Keith Anderson
</span>
</div>
<div class="views-field views-field-field-job-title">
<div class="field-content">VP, Digital Advisory</div>
</div>
<div class="views-field views-field-field-company">
<div class="field-content">RetailNet Group</div>
</div>
<div class="views-field views-field-title-1">
<span class="field-content">
Store of the Future
</span>
</div>
<div class="views-field views-field-field-headshot">
<div class="field-content">
<div id="file-53" class="file file-image file-image-jpeg contextual-links-region">
<div class="content">
<img typeof="foaf:Image" src="/kanderson.jpg" width="180" height="180" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's dynamically generated by a Drupal view, so I can't change the output html at all. I need to work with what is here. Here's the desired result:
Without any styling on the headshot, this is what it looks like:
I tried to style the image to force it to float to the left of the text:
.view-speaker-list div.view-content div.views-row div.views-field
div.field-content div.file-image div.content img {
border: 1px solid #666;
float: left;
position: relative; /* tried with and without position (inc. absolute) */
left: 30px;
}
Obviously I'm doing something wrong, because this is what I get (with relative position):
and with absolute position:
I've also tried putting the float on the "uppermost" div class that holds the image, with no position on the div:
.view-speaker-list div.view-content div.views-row
div.views-field-field-headshot {
float: left;
}
It gives the same result as the position: relative screenshot.
Where am I going wrong? If I had control over the html I'd do it differently, but I'm not sure how to deal with all of these nested divs.
EDITED TO ADD NEW SCREENSHOT FOR #WEX
Here's what it looks like when I tried to use your code with the html reordered - http://jsfiddle.net/mPa7z/
I'll try to explain the "right" way to use float so that you can see why your way didn't work.
In your post, you try to apply float: left to the <div> surrounding your image, but that technique only works when the element you are floating is above all the elements you want to wrap around it. That "may" solve your problem, but that technique has it's pitfalls if you're trying to use it to create two distinct columns - if the text on the right is taller than the floated element, the text on the right will wrap below it. So then you have to add another container around your non-floated elements to ensure that it won't wrap. This solves your problem, but doesn't really help if you can't even edit your markup!
I'd argue that the technique I've posted below works better, and solves your problem: http://jsfiddle.net/Wexcode/AQQwX/
.view-content {
position: relative;
min-height: 180px;
padding: 0 0 0 180px; }
.views-row { padding: 20px 0 0 20px; }
.views-field-field-headshot {
position: absolute;
top: 0;
left: 0; }
If you have access to the View itself in Drupal, you can reorder the elements. When logged into Drupal, open the View (in Drupal 7: Structure > Views > Viewname), look for "Fields" and click on the triangle next to "add", which will have a popup, then click "rearrange". You can then drag the photo field to be the first item in the View, then adjust your CSS to float the image to the left.
EmmyS,
Instead of trying to get the headshot to float:left, have you considered making the others float:right? This will give the impression that the image is floating left without having to change the markup in any way.
div.speaker-list div.views-row > div.views-field {
float:right;
clear:both;
}
div.speaker-list div.views-row > div.views-field.views-field-field-headshot {
float:none;
clear:none;
}
The above CSS should work with that specific configuration without altering any of your other Drupal generated markup. In order to make sure that other CSS does not interfere, I've applied as much specificity as possible. Since the headshot will be back in the containing <div>, you shouldn't need to alter the size of it unless the store is simply too large (I don't know without looking at your data). Finally the CSS is concise, so you can add any additional styling you need on a per-element basis.
Hope this helps,
FuzzicalLogic
When you can drop somewhere else on the page some code, you can gain control over the HTML by using jQuery. Then you could make modifications to the DOM tree.
But I do not understand why you can not edit the HTML. Isn't Drupal open source? You should be able to find the file using FTP and manipulate it.