On wider screen resolutions the gap in-between widget areas 2&3 is obviously greater then the gap between widget area 1&2 making the 3 areas together look uneven.
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
width: 332px;
}
.footer-widgets-1 {
margin-right: 36px;
}
.footer-widgets-1,
.footer-widgets-2 {
float: left;
}
.footer-widgets-3 {
float: right;
}
Is there a way to ensure even spacing between all 3 when using float: left on & a single float:right?
<div class="widget-group">
<div class="footer-widgets-1">
</div>
<div class="footer-widgets-2">
</div>
<div class="footer-widgets-3">
</div>
</div>
.widget-group
{
width: 1068px;
margin: 0 auto;
display: block;
overflow: hidden;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
width: 332px;
margin-right: 36px;
float: left;
}
.footer-widgets-3 {
margin-right: 0px;
}
You might want to try using a "Table" display here. A Table display can be used in situations where you want to have control over the width of each column.
It is hard to give the exact solution you need, but something similar as below should be good to get you started.
Structure your widgets to enable them to be displayed as a table.
<div id="tableContainer"> <!-- Serves as a container for the whole table -->
<div id="tableRow"> <!-- We have only one row in this table, which has 3 columns, one for each widget. -->
<div class="footer-widgets-1"></div> <!-- First column. -->
<div class="footer-widgets-2"></div> <!-- Second column. -->
<div class="footer-widgets-3"></div> <!-- Third column. -->
</div> <!-- End row. -->
</div> <!-- End table. -->
Apply the styles to display your widgets as table cells within a table.
#tableContainer {
display: table;
}
#tableRow {
display: table-row;
}
#footer-widgets-1, #footer-widgets-2, #footer-widgets-3 {
display: table-cell;
vertical-align: top; /* Vertically aligns the content within each table cell at the top of the cell. */
width: 33%; /* Set each table cell to approximately one-third of the total width of the page. */
}
/* Any other styles specific to each widget go here... */
Hope this works for you.
Related
I have an HTML page and I want to have a table that has four or five section and this is my first section with two columns but my text on the left side I can't get to the top. I'm tried adding padding-top: 0; adjusting the margin, aligning. I think maybe the combo on the div either adding to the sidebar or mycolumn in the table row since I want to rows in the left column.
/*CSS*/
#sidebar {
width: 750px;
}
.table-row {
display: table;
width: 100%;
margin-top: 0px;
}
.mycolumn {
display: table-cell;
padding: 15px;
}
#content {
width: 100%;
}
div {
outline: none;
}
#sidebar1 {
width: 750px;
}
.table-row2 {
display: table;
width: 100%;
}
.mycolumn1 {
display: table-cell;
padding: 15px;
}
#content1 {
/* width:100%; */
}
<!-- HTML -->
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
</div>
<div class="mycolumn" id="content"><img src="file:///C:\Develop\CodeSamples\manage-landing-page-master\images\illustration-intro.svg">
</div>
</div>
</div>
</div>
Try to use display: flex;instead of display: table;
And then set your h1 margin: 0;, because the h1 tag has default margin.
You use container and row as classes, but you don't define it in your css. Are you using bootstrap?
You also have padding in mycolumn. This will add padding left, top, right, and bottom.
Also consider:
.mycolumn { vertical-align: top; }
to force to the top.
I am trying to make a two column layout in HTML so that both columns always fill the entire screen no matter how much content. I want the left column to dictate the height of the right column (map column). So if the left column grows to 2000 pixels tall then the map column should do grow to 2000 also. If the left column is only 10 pixels worth of content then the map column should never be less than the entire browswer window height.
I have spent 8 hours trying divs, webflow, etc... and no luck. You would think this would take two seconds. Throw in some divs and make the 100% and done.
Here is what I have which does NOT work?
I have this html
<div class="table">
<div class="row">
<div class="cell1">
<div class="inner"> <!-- start left side -->
<strong>Transaction ID</strong>
<p>Nov 11th, 2015 at 2:44 PM</p>
</div> <!-- END start left side -->
</div> <!-- end 1st column -->
<div class="cell2">
<div class="inner">
<div id="map-canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
</div>
</div> <!-- end 2nd column -->
</div> <!-- end row -->
With this CSS
.table {
display: table;
border-spacing: 12px;
}
.row {
display: table-row;
margin-bottom: 0;
margin-top: 0;
width: 100%;
}
.cell1 {
display: table-cell;
width: 49%;
margin-right: 1%;
border: 1px solid #ccc;
margin 12px;
}
.cell2 {
display: table-cell;
width: 49%;
margin-right: 1%;
border: 1px solid #ccc;
margin 12px;
}
.inner {
padding-left: 12px;
padding-right: 12px;
}
Here is with the changes #mathew suggested below. Not sure why the margin on the left is even there. I even use cell2 css class for both columns.
I created a Fiddle with your html and css minus the working map.
All i did was add height: 100vh to your .cell1 class like so:
.cell1 {
display: table-cell;
width: 49%;
height: 100vh;
margin-right: 1%;
border: 1px solid #ccc;
margin 12px;
}
This seems to give the effect you are looking for. If this is not the result you are trying to get please let me know. Play around with it and delete a bunch of text to see if you have 1 sentence in there it is still the full height of the browser.
EDIT*: If you want it to look like the picture you need to remove the border-spacing from the .table class and set the body to margin: 0; like this:
body {
margin: 0;
}
.table {
display: table;
}
I have updated the Fiddle to reflect these changes.
Hope this helps!
It appears that you were on the right path. I simply modified your html by removing the .row div and adding the class .col to the .col1 and .col2 divs (so that you only have to style them once). In my testing, that seems to work. Try the CSS and HTML code below and see if it works for you as well.
.table {display: table;}
.table .col {
display: table-cell;
width: 49%;
margin-right: 1%;
border: 1px solid #ccc;
margin 12px;
}
.inner {
padding-left: 12px;
padding-right: 12px;
}
<div class="table">
<div class="cell1 col">
<div class="inner"> <!-- start left side -->
<strong>Transaction ID</strong>
<p>Nov 11th, 2015 at 2:44 PM</p>
</div> <!-- END start left side -->
</div> <!-- end 1st column -->
<div class="cell2 col">
<div class="inner">
<div id="map-canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
</div> <!-- end inner -->
</div> <!-- end 2nd column -->
</div> <!-- end table -->
I'm trying to make a three column layout that stretches to the bottom of the screen which uses the Zurb Foundation grid.
The basic structure involves three columns, each with a title in the center and a distinctive background image, and a footer.
This is what I'm trying to achieve (where the three colours would be background images):
The issue is that since there isn't enough content to fill the screen my columns don't stretch to the bottom. I've been able to fix the footer to the bottom of the page using this technique https://css-tricks.com/snippets/css/sticky-footer/.
But the result looks like this:
Here is my html:
<div id="content-wrapper">
<div class="row collapse">
<div class="small-centered large-uncentered large-4 columns episode">
<div class="episode-titles">
<h1>Column01</h1>
</div><!-- ends episode titles-->
</div><!-- ends episode-->
<div class="small-centered large-uncentered large-4 columns episode" >
<div class="episode-titles">
<h1>Column02</h1>
</div><!-- ends episode titles-->
</div><!-- ends columns-->
<div class="small-centered large-uncentered large-4 columns episode" style="background-image:url('{{ featured_image }}');">
<div class="episode-titles">
<h1>Column03</h1>
</div><!-- ends episode titles-->
</div><!-- ends columns-->
</div><!-- ends row collapse-->
</div>
and here is my css:
body, html {
height: 100%;
}
#content-wrapper {
min-height: 100%;
margin-bottom: -90px;
}
#footer, #content-wrapper:after {
height: 90px;
}
#content-wrapper:after {
content: "";
display: block;
}
#footer {
background-color: #161616;
border: none;
}
.episode {
max-width: 100%;
background-size: cover;
background-position: center center;
text-align: center;
height: 100%;
}
.episode-titles {
text-align: center;
display: inline-block;
vertical-align: middle;
}
Here is a fiddle for my approach:
JSFiddle
For the footer though, I just used position: fixed instead. The key thing is that you also need to specify height on the parent elements too, the content-wrapper, the row, etc.
The only caveat with the way I did it though, is that the row-footer div is position fixed and has a z-index of 1. So it is essentially hovering over the 3 columns. So that means if there does happen to be any content contained within these columns that nears the very bottom, there is a potential it can be covered.
I have been struggling with this for over 4 hours now and I can't figure this out.
Usually when I design a site I always have it centered so I never face the problems were divs break out of the layout.
ISSUE 1
I have a sidebar on the left, followed by a content block and then a sidebar on the right.
Each sidebar should be 180px wide and the content block should fill the empty space between those two sidebars.
I can't even get them to float next to eachother now, I could do so before but I am really getting crazy.
Even if I do get them to float next to eachother, when I zoom in the page the content block breaks layout and falls down below the left sidebar it is so super annoying I never had this issue before.
ISSUE 2
The div Block at the header should automatically size between the two logos, similar to what i need for the content_wrapper, how can i do this?
Can someone help me please?
Thanks
HTML
<div id="header">
<div id="left_logo" class="logo"></div> <!-- Logo on the Left -->
<div id="block">This is a block</div> <!-- Div block inbetween the two logos -->
<div id="right_logo" class="logo"></div> <!-- Logo on the Right -->
</div>
<div id="content_wrapper">
<div id="left_sidebar" class="sidebar">Left Sidebar</div>
<div id="middle_content">Middle Content</div>
<div id="right_sidebar" class="sidebar">Right Sidebar</div>
</div>
CSS
html,body {
height:100%;
}
body {
background-image: url('../bg.jpg');
}
#header {
width: 100%;
border: solid 1px;
overflow: hidden;
}
.logo {
width: 180px;
height: 180px;
background-image: url('../avatar.jpg');
border: solid 1px;
}
#block {
border: solid 1px;
float: left;
}
#left_logo {
float: left;
}
#right_logo {
float: right;
}
#content_wrapper {
width: 100%;
}
.sidebar {
width: 180px;
float: left;
}
#middle_content {
min-height: 500px;
width: 100%;
float: left;
}
There are several points to note
move the #right_sidebar before the #middle_content
#right_sidebar must float right not left
#middle_content must not float and not have width: 100%
if you want to have the #middle_content in its own column, i.e. not float below the left and right sidebar, add margin-left and margin-right
The same applies to #header.
See JSFiddle for how this could look like.
Although it's several years old, there's a nice overview of basic layout schemes with CSS at http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
At the bottom of this page, there are two columns. The right-hand column contains a twitter feed and the left-hand column shows a YouTube video and a comments section. The columns are created by the following HTML & CSS
.leftCol {
margin-right: 365px;
}
.rightCol {
float: right;
margin-bottom: 10px;
width: 355px;
}
<div class="rightCol">
<div>
<div class="leftCol">
<div>
But for reasons I don't understand, the left-hand column doesn't slide up into the vacant space to the left of the the right-hand column.
Just remove clear: both; from your inline styling of <h2 class="banner bgImage video">.
Change your .leftCol styling to:
.leftCol {
float: left;
width: 365px;
}
The margin is creating an illusion of space to the right of the left column.