I'm having some serious trouble getting things to float left correctly, or rather getting elements to float "true" left.
This is my current output:
and this is what I am hoping to achieve:
here is a jsfiddle, any help would be greatly appreciated. :)
html:
<div id="content">
<div class="box1">
1
</div>
<div class="box2">
2
</div>
<div class="box1">
3
</div>
<div class="box1">
4
</div>
<div class="box1">
5
</div>
</div>
css:
html, body {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
#content {
margin: 20px 0px 0px 20px;
width:180px;
background-color: green;
overflow: auto;
padding-left: 10px;
}
.box1 {
margin: 10px 10px 0px 0px;
background-color: red;
position: relative;
float: left;
height: 50px;
width: 50px;
}
.box2 {
margin: 10px 10px 0px 0px;
background-color: blue;
position: relative;
float: left;
height: 110px;
width: 50px;
}
Oh and just a little note, I'd prefer to accomplish this without using javascript but am happy to use it as a last resort.
Floats are not capable of the layout you are looking for. You need something more the columns.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
But you have to be careful of the cross browser and they are not great at percentage widths either (from experience).
I got something similar to what you want
Fiddle
.box5 {
margin: 10px 10px 0px 0px;
background-color: red;
position:absolute;
float: right;
height: 50px;
width: 50px;
float:left;
left:150px;
top:80px;
}
I think this can't be done with only css at the moment, maybe in some short future, but there is a lot of javascript solutions to this and making some research i found Masonry, wich i think is the most popular. You should try it.
i have found answer to what you are looking for.... just see this fiddle i have edited...
.box4 {
margin: 10px 10px 0px 0px;
background-color: red;
position: relative;
float:left;
height: 50px;
width: 50px;
margin-top:-50px;
margin-left:3px;
}
http://jsfiddle.net/fWK2A/6/embedded/result/
Related
This is what I am working on http://www.pathfinderscc.com/index.htm
The divs on the colored boxes are validating strict but Im not sure the coding is as it should be. Nor the CSS.
Its confusing what to do here, so I am wondering if there is a more appropriate way to align these divs. Also, the images are set to background and I know how to make them contained in the divs themselves, but not the css.
I also want to have the text inside the boxes, be underneath the boxes.
I am going to have images of videos, but the videos themselves. I want the page to load fast and then link to the individual videos I will host. I need this page at least to validate strict.
So far it does, but something tome could be better about this coding.
Here is the code.
<div class="container">
<h2>Videos</h2>
<div class="red">Beginer
<div id="container2">
<div id="left1"><p>
Introduction</p>
</div>
<div id="center1">B</div>
<div id="right1">C</div>
</div>
</div>
<div class="blue">Intermediate
<div id="container3">
<div id="left2">A</div>
<div id="center2">B</div>
<div id="right2">C</div>
</div>
</div>
<div class="green">Advanced
<div id="container4">
<div id="left3">A</div>
<div id="center3">B</div>
<div id="right3">C</div>
</div>
</div>
</div>
And the CSS
}
.container {
position: relative;
margin: auto;
width: 500px;
height: 500px;
text-align: center;
}
.red {
background-color: #f00;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.blue {
background-color: yellow;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.green {
background-color: green;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
#container2 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left1 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#center1 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#right1 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#container3 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left2 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#center2 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#right2 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#container4 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left3 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}
#center3 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}
#right3 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}
At first glance, you should generally be using classes, not IDs. That way elements that share the same CSS (container2, container3, etc, for example) can use the same class and you do not have to duplicate the CSS between different IDs. Similarly, elements can have more than one class. For example, change class="red" to class="color red" and use this:
.color {
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.red {
background-color: #f00;
}
.blue {
background-color: yellow;
}
.green {
background-color: green;
}
That way, .color can be applied to any element and your code becomes much more maintainable.
Just another tip. You can also use CSS Prettifiers to increase your performance. Check ProCSSor
I'd set up your CSS classes to be more reusable. There would be shared settings for these blocks in say a "image-block" class, and then the other settings for left/right/center in other classes.
I see a nice example of the CSS for such, so here's an example of how your HTML might change (using similar but differently named classes.)
<div class="container container-red">
<div class="image-block block-left">
<img src="...">
<p>A</p>
</div>
<div class="image-block block-center">
<img src="...">
<p>B</p>
</div>
<div class="image-block block-right">
<img src="...">
<p>C</p>
</div>
</div>
Hello I had problem positioning a div to the center of the page.
CSS:
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
margin: 0 auto;
}
Am I doing something wrong? Also I should mention that this div is inside another div, so could that be a problem? How to avoid it than?
Have you tried to enter the width to be smaller than the outer div?
Something like that:
.fancyClass{
width: 50%;
margin: 0 auto; <!-- that does the actual centering -->
#all the other attributes you have
}
Please Try this and let us know
HTML:
<div class="outterDiv">
<div class="innerDiv">
some thing here
</div>
</div>
CSS:
.outterDiv{
width: 100%;
background-color: #ccc;
padding: 25px;
}
.innerDiv{
width: 50%;
background-color: #eee;
margin: 0 auto;
text-align: center;
}
fiddle EXAMPLE HERE
here you can see the div is horizontally and vertically centered in page. Here is the Demo.
have a look at CSS.
body{margin:0 auto;
text-align:center;
}
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
text-align:left;
width: 25%;
height: 25%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
<div class="fancyClass">
this text will be center
</div>
This should do the work:
margin-right:25%;
margin-left:25%;
I would like a two column layout without worrying about the background when one column happens to be tallest than the other.
I have read about faux columns, liquid layout, but I would like to ask you if it may work this way: I have a "main" element with a semi-transparent image as background (16x17px). The main element contains the 2 floating columns, the left floats left and the right one floats right.
.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
}
.colleft {
float: left;
width: 618px;
padding:10px 5px 10px 10px;
}
.rightbar {
margin: 0 auto;
width: 50em;
float: right;
padding:10px 5px 10px 10px;
width: 376px;
}
.titolo {
text-align: center;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 30px;
color: #35231e;
line-height: 100%;
padding:10px 0px 0px 0px;
}
.contenuto {
text-align: left;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 25px;
color: #35231e;
line-height: 100%;
padding:20px 0px 0px 0px;
}
There is something wrong in my HTML and I cannot see where.
Am I this far from the solution?
<div class="main">
<div class="colleft">
<div class="titolo">ARTICLES</div>
<div class="contenuto">CONTENT</div>
</div>
<div class="rightbar">
<div class="contenuto">RIGHT BAR CONTENT</div>
</div>
</div>
You may use JSFiddle or similar to test it. As well as Firebug or similar.
When you work with floats, you must contain your floats.
In order to do so, you have several techniques at your disposal.
Among them, a simple one:
overflow:hidden; your float container.
In your case, the element with class .main.
Try this:
.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
background-color: red; //<-- added just to test.
overflow:hidden; //<-- to contain the floats.
}
I'm having a layer problem where this layer content-3f display over all other layers below it:
<div id="content-3f">
<div id="content-3-1f"></div>
<div id="content-3-2f"></div>
<div id="content-3-3f"></div>
</div>
<div class="line"><hr class="top" /></div>
Css:
#content-3f {
float: left;
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
clear:both;
}
#content-3-1f
{
float: left;
width: 269px;
height: 202px;
margin:0px 20px 0px 0px;
padding: 0px;
background: url('../images/Guided-tour-logo.png') no-repeat left top;
}
#content-3-1f a
{
width: 269px;
height: 202px;
display:block;
}
#content-3-2f
{
float: left;
width: 269px;
height: 202px;
margin:0px 20px 0px 0px;
padding: 0px;
background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}
#content-3-2f a
{
width: 269px;
height: 202px;
display:block;
}
#content-3-3f
{
float: left;
width: 269px;
height: 202px;
margin:0px 0px 0px 0px;
padding: 0px;
background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}
Screenshot:
As you see it goes over the <hr>
How to fix?
the problem is due to the "float:left" on your #content-3f. The float needs to be cleared for this to work. Here's your solution::
HTML
<div id="content-3f">
<div id="content-3-1f"></div>
<div id="content-3-2f"></div>
<div id="content-3-3f"></div>
</div>
<div class="clear"></div>
<div class="line"><hr class="top" /></div>
Notice the additional div with class "clear" This is used to clear the float in your elements.
Now the CSS
#content-3f {
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
}
.clear {
clear:both;
}
The rest of the css remains the same. Hope this helps.
Yes, I agree with gapple. I guess I didnt study your css properly. its the "height:103px" that's creating the problem. remove that and it works as it is.
But I would like to point out that its always a good idea to clear floats nonetheless.
Adding the following to your CSS should give you the answer you are looking for.
#content-3-1f,
#content-3-2f,
#content-3-3f {
position:relative;
z-index: 1;
}
Basically z-index tells things which "layer" to live on. The default layer is z-index: 0;
You also need to specify a relative or absolute position for it to take affect.
The more elegant solution is to use display:inline-block rather than float:left on your boxes.
http://www.vanseodesign.com/css/inline-blocks/
Ok this is my problem:
The left float and right float are somehow not put into my container and the footer only pays attention to the middle content part. What am I doing wrong?
I could show it with a picture but I cannot add one because I don't have 10 rep.
It must be a simple fix, I have read about clear:both etc but that all does not work unfortunately.
#container
{
position: relative;
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
text-align: left;
}
#header
{
height: 160px;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
position: absolute;
top: 160px;
left: 0;
float: left;
width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
position: absolute;
top: 160px;
right: 0;
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
margin: 0 26% 0 26%;
padding: 0 10px;
background: #0F0;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
I'm not sure what you are trying to achieve without knowing your html structure, but the problem stems from the fact that you have absolute positioning on your left and right containers as well as a floted positioning.
The default positioning for a html element is static, so you either float everything or absolute position everything. Here's something to help you understand positioning better, it's very easy and you'll be on your way in 5 minutes: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Also, you should post a jsfiddle link with the html included so we'll understand better what you are trying to achieve if you need further help. My guess is that Rohit Azad's solution is correct, you just have trouble understanding positioning.
Hi i check to your code i think you want to this
HTML
<div id="container">
<div id="header">Header</div>
<div id="mainContent">
<div id="sideleft">Left</div>
<div id="sideright">Right</div>
</div>
<div id="footer">Footer</div>
</div>
Css
#container
{
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
}
#header
{
height: 160px;
background:red;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
float:left; width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
padding: 20px 10px;
background: green;
overflow:hidden;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
Live demo