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.
Related
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.
I have the following Html and CSS Fiddle Example:
<div>
<i class="fa fa-yelp"></i>
<h2>Help</h2>
<p>This is some text which I want to be on the right side of span</p>
</div>
div {width: 200px;}
i {
font-size: 48px!important;
float: left;
}
h2 {float: left;}
p {float: left;}
I need that h2 and p to be on a same column on the right of the i tag.
I am using floats but no luck. How can I do this without tables?
Have you tired giving margin to the paragraph?
p {float: left;
margin-left:20px;
margin-top:0px}
** UPDATE **
Fiddle: http://jsfiddle.net/847ndaap/13/
In this example I am floating the left div only, and letting the right div fall into place, but giving it a padding that matches the size of your left floated div (48px). Works like a charm. I am also using min/max-width to allow the responsive bits to work.
New CSS:
.main{
max-width: 200px;
overflow: hidden;
}
.left{
float: left;
width: 48px;
}
.left i{
font-size: 48px!important;
}
.right{
padding-left: 48px;
max-width: 152px;
}
-
-
OLD:
So what you need to do is give yourself a container to hold your inner floated content. Then use 2 divs inside, a left and right. The left will contain your icon and the right will contain your content. Floats nest if you don't contain them - you will also need to specify width of each side so don't forget that. You will need to use a clearfix on your main container - in this example I am using a basic overflow hidden fix.
Fiddle: http://jsfiddle.net/847ndaap/10/
New HTML:
<div class="main">
<div class="left">
<i class="fa fa-yelp"></i>
</div>
<div class="right">
<h2>Help</h2>
<p>This is some text which I want to be on the right side of span</p>
</div>
</div>
New CSS:
.main{
width: 200px;
overflow: hidden;
}
.left{
float: left;
width: 48px;
}
.left i{
font-size: 48px!important;
}
.right{
width: 152px;
float: left;
}
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
Hi,
I try to create columns with album images and some info.
I want the info to overlay for a litle bit on the image next to it.
Like on this image:
However either i break floating left or the text get's totaly on top of the image etc. etc.
Like everything except the desired result.
Some help would be great, here's a jsfiddle:
http://jsfiddle.net/Scf4u/
small piece of the code:
<div class="entrie">
<img class="entrieImage" src="http://doekewartena.nl/temp/images/img02.png"/>
<div class="entrieInfo">
<div class="band">Kids for Cash</div>
<div class="album">No More Walls E.P.</div>
<div class="label">...</div>
<div class="year">1986</div>
<p>-</p>
<div class="tags">rousseau, green, woodsy, band photo, 12IN, tree, civilization, Atco, 1960's, Fuzz
</div>
</div>
</div>
css:
.entrie {
float: left;
}
.entrieInfo {
width: 200px;
float: left;
margin-left: 10px;
}
.entrieImage {
/* if you only set the width then the height will be set automaticly proportional*/
width: 300px;
float: left;
}
http://jsfiddle.net/Scf4u/1/
#entries .entrie:nth-of-type(2n) {
margin-left: -41px;
position: relative;
z-index: -1;
}
Should take every second .entries div and set a negative margin on the left, and a z-index to be underneath the previous div. Might have mixed up my pseudo selector.
Put margin-right: -30px; on .enterieInfo.
Beat by Christopher Marshall. Either or should work.
I have a logo and a secondary menu that I would like to appear on the same line (the logo on the far left, and the menu on the far right). The logo width is undefined and the secondary menu width is 200px wide. When I apply the following CSS, the secondary menu is pushed to the line below the logo (but still on the right side of the page):
#logo {
padding-bottom: 40px;
}
.secondaryMenu {
width: 200px;
float: right;
margin-right: 0px;
padding-right: 2px;
color: black;
font-size: 9px;
letter-spacing: 1px;
text-align: right;
}
Here is the relevant part of the HTML:
<div id="logo">
<img id="logoimg" border="0" alt="" src="images/logo.gif"/>
</div>
<div class="secondaryMenu">
About | Services |
Contact Us
</div>
I would appreciate any thoughts on what I'm doing wrong.
#logo would need to float: left
then you should probably add a clear: both styled container after .secondardMenu or wrap them both with a clearfix class'd container