In the following code from: http://6.470.scripts.mit.edu/css_exercises/exercise5.html
<html>
<head>
<style type="text/css">
.wrapper1 {
width: 65%;
margin: 0px auto 0px auto;
border: 1px solid;
text-align: center;
background: #eeeeee;
}
.wrapper2 {
clear: left;
width: 80%;
margin: auto;
border: 1px solid;
background: #111111;
}
.p1 {
margin: 20px;
font-size: 70px;
}
.p2 {
font-size: 50px;
}
.link-gr {
list-type: none;
}
.link-gr li{
float: left;
}
.link-gr li a{
display: block;
width: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
<div class="wrapper2">
<p class="p1">MIT 6.470</p>
<p class="p2">Learn Web Programming this IAP</p>
<ul class="link-gr">
<li>Comprehensive Curriculum</li>
<li>Insightful Guest Lectures</li>
<li>Interaction with Sponsors</li>
<li>$30,000+ in Total Prizes</li>
</ul>
</div>
Copyright © 2012 MIT 6.470
</div>
</body>
the ul.link-gr links are falling outside the div. I mean everything excluding the links are wrapped inside div.wrapper2 with border and black-ish background but the links are placed outside the box (like outcast-ed). This is very strange. Some explanation from your side will be highly appreciated.
Thanks
I would think this is a float problem: your code contains
.link-gr li{
float: left;
}
The problem is that its container is not float: left, which means that the list items are free to go anywhere. Try adding float: left to the .link-gr as well:
.link-gr{
float: left;
}
This may solve the problem. Fiddle: http://jsfiddle.net/abZHK/1/
Ah floats...
Explanations
See this old article from P.I.E: Clearing floats (IE/Win is IE version 6 there)
Solution
Apply this modern clearfix (on parent of the non-contained floats)
Related
the contact form i have on my front page that im making, has some CSS on it so its all centred, fits inside the white box it creates etc, yet one of the fields doesn't seem to fit inside the white box but everything else does, heres the site.
https://www.traveltradewinds.com/ttw/
When i change the CSS to try and fix it, i noticed that the width being set to 110% fits it in, but then isn't in the centre of the screen as a result, on a side note, the checkbox isn't the default input type checkbox it has a style to it that i haven't added, can anyone help me to show whats going wrong as it looks like ti should work to me?
Many thanks
Edit: forgot to add the CSS code, sorry:
#media only screen and (min-width: 40.063em) {
.hero .hero-inner {
width: 100% !important;
float: left;
margin-left: 1.38889%;
margin-right: 1.38889%;
}
}
.hero .hero-inner {
width: 100%;
float: left;
margin-left: 1.38889%;
margin-right: 1.38889%;
}
ul {
display: flex;
}
form {
border: 1px solid white;
background: white;
padding: 10px;
border-radius: 5px;
}
.widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.hero .widget ul li, .hero .widget ol li {
list-style: none;
height: 48px;
margin: 50px 15px;
height: 48px;
margin: 50px 15px;
}
.hb-submit{
text-align:center;
}
Looks like it belongs to hotel-booking.css. Please check this
You didn't need to use the FORM tag for parent and LIST tag to children. You would use the DIV to create this part and then give 17% of main width to each subDIV.(1% to margin) such as below code:
body {
width: 100%;
text-align: center;
}
.mainDIV {
background: red;
width: 80%;
}
.subDIV {
background: blue;
height: 100px;
width: 17%;
margin: 1%;
display: inline-block;
}
<div class="mainDIV">
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
</div>
I hope it will be useful.
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
The app (RoR) shows a set of rows with posts info. Each row has the title aligned to the left and date aligned to the right.
I need to have a link working over all the row, not only over the text.
If I don't use float, the link works properly over all the row but I cannot establish a margin-top. If I use float, the margin-top works OK, but then the link only works over the text.
I don get what the issue is. Any ideas?
This is my css:
.post {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 40px;
border-bottom: 1px solid #BDBDBD;
}
.post a {
display: block;
text-decoration: none;
}
.post a span.title{
float: left;
margin-top: 7px;
}
.post a span.date{
float: right;
margin-top: 7px;
}
I assume your html structure is like this:
<div class="post">
<a href="#">
<span class="date">date</span>
<span class="title">title</span>
</a>
</div>
Note: I moved the date up and title down, because we're going to make the first one to float right. You can then use margin or padding as needed.
.post {
margin-left: auto;
margin-right: auto;
width: 900px;
border-bottom: 1px solid #BDBDBD;
}
.post a {
display: block;
text-decoration: none;
padding: 10px 0;
}
.post a span.date {
float: right;
}
DEMO: http://jsfiddle.net/42vdh6bL/
My apologies if this too basic of a question but CSS is boggling me. I think I'm doing something that CSS is supposed to do easily but it is simply not working the way I read the documentation.
Here's my example. It's been massively simplified but the basic problem remains. I'm sure this is some core misconception on my part, I just don't know where it lies.
Here's the goal:
Here's what I get now:
Here is the HTML:
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
And here's the CSS:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000;
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
padding: 0px 30px;
border-top: none;
border-bottom: none;
color: #000;
background: #d6b982;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42 {
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background: #d6b982;
}
I can't get the floats right (I know, Yet Another Float Question). The main issue is that this is going to be a menu with a variable number of items, so as the menu grows, ("Departments" now, but later "Departments", "Services", "Sections", etc.) it should push to the left, reducing the length of the line I can't use a fixed length on the leading line (#block-imageblock-42). Also, the menu items will have separators, so I can't just full-width things. This needs to be done in pure CSS, no jQuery or other JS.
Here's my JSfiddle of the problem: http://jsfiddle.net/zjfsy/
UPDATE: I have modified the question to be more specific per the requests of folks trying to help. The "goal" image at the top has been updated to more accurately reflect the issue. One thing I really want to make clear is that this specific instance is not so important. I already doctored up a position:absolute fix that will hold for the short term. My desire is to understand better why this is so hard. I have three containers. I want two of them to float right and the third to expand to fill the space from the last container to the edge of the page. It seems like this is what float was supposed to do. I assume this is some base misunderstanding on my part.
Anyway. Here's more constraints:
The leading bar needs to expand to fill the empty space between the
left side and the swish.
Each of the tabs needs to have a separator that allows the background through.
The number of the tabs is variable, based on client choices -- which
can change regularly.
I can't really change the structure of the HTML, other than
modifying it with CSS.
And again, all help is very much appreciated.
here is my solution: http://jsfiddle.net/abbood/b56Vq/ (never used jsfiddle before.. so sorry if i did this wrong, or if i was supposed to fork your project)
here is the code:
<html>
<head>
<link href="betterStyle.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<ul>
<li><div></div><div>Departments</div></li>
<li><div></div><div>Services</div></li>
<li><div></div><div>Sections</div></li>
<li><div></div><div>stuff</div></li>
</ul>
</div>
</body>
</html>
//betterStyle.css
#wrapper {
height: 2.5em;
background-color: #e0203b;
background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');
background-position: bottom;
background-repeat: repeat-x;
}
ul
{
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
ul li {
float: right ;
display: inline-block;
}
/* text */
ul li div:nth-child(2) {
line-height: 2.5em;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
background-color: #d6b982;
float: right;
padding-right: 1em;
}
/* image */
ul li div:nth-child(1) {
background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
background-position: left top;
background-repeat: no-repeat;
float: left;
width: 53px;
height: 40px;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
}
notes:
i created my own image and I linked to it using some image hosting service.
you can add as many tabs as you want (i assumed that each tab will have that image attached to it.. i wasn't sure how you wanted the final thing to look like (the right edges look too sharp).. but i'm sure you can adjust it to your liking.. when adding extra tabs the horizontal line shrinks.. i think that's what you meant when you said so as the menu grows, it should push to the left, reducing the length of the line
update:
Here is the updated answer without changing a line in the html: http://jsfiddle.net/abbood/SkxkC/ (for some reason there is a bump under the folder image in jsfiddle.. i tested it on mac chrome/safari/firefox and they worked fine.. lemme know if it isn't working perfectly for you though)
html (pretty much same.. just added a couple of tabs just for fun):
<body>
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
<li><span title="Departments" class="nolink">Services</span>
</li>
<li><span title="Departments" class="nolink">Classes</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
</body>
css:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000; /* red */
height: 40px;
position: relative;
z-index: -2;
}
#line-wrapper div {
background-color: #ff0000; /* red */
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
border-top: none;
border-bottom: none;
color: #000;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
margin: 0;
padding: 0;
}
#nice-menu-1 ul {
padding: 0;
background-color: #ff0000; /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#nice-menu-1 li{
list-style-type: none;
display: inline-block;
padding: 0 2em;
background: #d6b982; /* bage */
height: 40px;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42
{
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background-color: #d6b982 !important;
position: absolute;
z-index: -1;
}
I a have also done something similar that does not use the position:relative feature for the #line-wrapper since that may cause you some problems when you implement it.
See http://jsfiddle.net/zjfsy/
#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}
#line-wrapper {
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}
Hope this helps! (I am definitely going to vote wxactly's answer up since it is a better answer than mine since it doesn't require "hard coding" with magic number margins, etc. Definitely use his answer if you can, but now at least you have two different ways.
I ran into this unusual Firefox-only (as far as I know - I only checked against Safari and Chrome, and was using Firefox 3.6) CSS bug today at work, and managed to reproduce the problem with a much smaller snippet of code, here:
<!DOCTYPE html>
<head>
<style>
/*
* A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
* added just to make sure it's not from weird browser padding/margin. Still happens
* if this is removed though
*/
html, body, div, span, p, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
body {
line-height: 1;
}
li {
list-style: none;
}
body {
color: #333;
font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
line-height: 1.3;
}
/* Some clearfix code from HTML5 Boilerplate */
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div style="padding: 20px; border: solid thin black;">Hello!</div>
<div>
<ul class="clearfix">
<li style="float: left; padding: 5px; border: solid thin black;">There</li>
<li style="float: left; padding: 5px; border: solid thin black;">should</li>
<li style="float: left; padding: 5px; border: solid thin black;">be no</li>
<li style="float: left; padding: 5px; border: solid thin black;">margin</li>
<li style="float: left; padding: 5px; border: solid thin black;">above</li>
<li style="float: left; padding: 5px; border: solid thin black;">this</li>
<li style="float: left; padding: 5px; border: solid thin black;">list</li>
</ul>
<p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
</div>
</body>
</html>
Here's a screenshot of what the problem looks like
So what I'd normally expect to happen here is that there's no margin between the two <div>s, or above the <ul>, and indeed, hovering over elements in Firebug will show no margin/padding coloring. But for some reason, the 30px margin-top from the <p> is being applied to both the <p>, as well as its containing <div>. My guess is that something's buggy with the clearfix (and indeed, if you use a clearing <br/>, this problem goes away), but I'm curious if anyone has insight into what exactly the problem here is. Thanks!
That's correct, you are not using the right clearfix ;-)
This one should fix the issue:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
See:
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
BUT - the elephant in the room that isn't being mentioned is a Firefox float bug which affects at least 3.6-6 (tested). A float container styled with ':after { content:"" }' (where content is empty or any type or whitespace) will duplicate the margin-top of the following element! This only appears to affect Firefox and is clearly a bug.
Simple test case:
<div class="container cf">
<div class="floater"></div>
</div>
<div class="next">
<p>Some content here!</p>
</div>
<style>
body { padding: 0; margin: 0; }
.cf:after { content:""; display:block; clear:both; *zoom:1; }
.container { background:gray; }
.floater { float:left; width:46%; height:200px; margin:0 10px; background:#ddd; }
.next { background: yellow; margin: 30px 0px; }
</style>
http://jsfiddle.net/TjW6c/394/
You're not using the clearfix right. Using positioniseverything's clearfix(a.k.a. pie-clearfix) is usually my solution to all clearfixes:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
You can check it out here: http://jsfiddle.net/WVtYd/