I have the code as follows:
<html>
<head>
<style type="text/css">
#container {
}
#content {
}
a {
color:#0083cc;
}
body {
margin:0px; padding:0px;
}
#header {
height:20px;
background-color:#fb0000;
}
#section1 {
margin: 0 auto;
width: 50%;
border-style: none none solid solid;
border-width: 5px;
border-color: red;
margin-top: 100px;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div style="float: left;">
Test
</div>
<div id="section1">
<div style="text-align:center;">
<h1 style="color:#999999;">Please <a>Login</a> or <a>Signup</a></h1>
</div>
</div>
</div>
</div>
</body>
</html>
I am wondering if it is possible to have the border that #section1 has continue all the way to the bottom of the #header? As well, would it be possible to have the div containing "test" floated so it appears immediately to the left of #content1's border?
I am fine with completely restructuring the page, so fire away.
Thanks in advance!
Edit: Actually, what I am looking to accomplish is much like facebook's current layout.. Just simpler. So that could be used as a reference to see the end goal
Why don't you set padding-top: 100px; instead of margin-top: 100px; in your #section1 style? If you want to have the Test content appear lower as well, you can achieve this with another rule like e.g. #content div:first-child { margin-top: 100px; }.
Related
I have been trying to place 2 different divs one after the another but they seem to be starting from the same point for some reason. Doesn't div divide that area of web page ?
<div class = "part1">
<div id = "p1left"> something </div>
<div id = "p1right"> something </div>
</div>
<div class = "part2">
<div id = "p2left"> something </div>
<div id = "p2right"> something </div>
</div>
while my css code is something like this :-
.part1, .part2 {
position:relative;
}
#p1left, #p2left {
float:left;
}
#p1right,#p2right {
float:right;
}
Why is like 2nd div part of the first one? how do I put first before 2nd?
Update your CSS to
.part1, .part2 {
position:relative;
clear:both;
}
clear:both property removes the Left and right floating elements and ensures that the next div comes below the previous div.
Working Fiddle Here
Use this css
.part1:after, .part2:after{
content: "";
display: table;
clear: both;
}
OR add a new class something like .clearfix to both div and use below css:
.clearfix:after{
content: "";
display: table;
clear: both;
}
Use clear in css to make the div appear alone horizontally
clear:both;
Try this one
.part1, .part2 {
float:left;
}
#p1left, #p2left {
float:left;
margin:5px;
}
#p1right,#p2right {
float:left;
margin:5px;
}
https://jsfiddle.net/xre9j6k2/
Please find below, the updated HTML and CSS
HTML
<div class="part1">
<div id="p1left"> something 1</div>
<div id="p1right"> something 2</div>
</div>
<div class="clearfix"></div>
<div class="part2">
<div id="p2left"> something 3</div>
<div id="p2right"> something 4</div>
</div>
CSS
.part1, .part2 {
position:relative;
}
#p1left, #p2left {
float:left;
}
#p1right,#p2right {
float:right;
}
.clearfix {
clear: both;
}
Without using position attribute, you can do it like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.divone{
width: 300px;
height: 300px;
background-color: orange;
}
div.divtwo{
width: 300px;
height: 300px;
background-color: yellow;
}
div.divone, div.divtwo{
float:left;
}
</style>
</head>
<body>
<div class="divone"></div>
<div class="divtwo"></div>
</body>
</html>
Or if you want to use with position attribute, you can do it by giving the position only to your second div like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0;
}
div.divone{
width: 300px;
height: 300px;
background-color: orange;
}
div.divtwo{
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;
top: 0px;
left: 300px;
}
</style>
</head>
<body>
<div class="divone"></div>
<div class="divtwo"></div>
</body>
</html>
Sorry if this is dumb but it is my first day learning CSS and I am following a course and creating a sample layout and I seem to have made some kind of mistake or got carried away adding my own little mods. I desperately want to fix this as I am enjoying learning and worry that if I get stuck on this I wont feel like proceeding.
I have 3 divs at the bottom on my page with the class .Featurebox within which are nested 3 other divs with a class .Boximage
For the life of me I cannot get them to line up horizontally despite floating them. I suspect it is because I have used margin-left:auto and margin-right:auto in a parent nav. I have played with this solution for a full hour LOL and so I am asking for help here as my first time.
Here is my CSS:
#maincontent {
width: 960px;
margin-left: auto; margin-right:auto;
}
body {
background-color: lightgrey;
}
h1 {
color: orange; font-family: ubuntu; padding-top: 10px;
}
header {
margin-top: 2;
width:100%;
height: 100px;
background: url(grey.png) repeat;
}
#headercontainer {
width: 960px; height: 100px;
margin-left: auto; margin-right: auto;
background-color: olive;
}
#navbar {
width: 960px; height: 20px; margin-left: auto; margin-right: auto; background-color: red;
}
#logo {
background-color: lightgrey; height: 100px; width: 100px;
}
nav {
width: 100%; height: 20px; background-color: #f0f0f0; float:left;
}
article {
width: 960px; height: 500px; background-color: orange;
}
.Featurebox {
background-color: darkgrey;
width: 310px;
height: 200px;
float: left;
}
.Boximage {
background-color:blue; width:285px; height: 130px;
float:left;
}
footer {
width: 100%; height: 80; background-color: 000000; clear: left;
}
.center {
margin-left: auto;
margin-right: auto;
}
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="headercontainer">
<div id="logo">logo</div>
</div>
<nav>
<div id="navbar">navigation bar</div>
</nav>
</header>
<div id="maincontent">
<article>article here
</article>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
<div class="Featurebox">
<div class="Boximage"</div>
I suspect your issue is the above. Look carefully, and you will see a syntax error. It should be:
<div class="Featurebox">
<div class="Boximage"></div>
For further testing purposes I suggest putting in some inline content in the box to ensure it renders. (if no height or width is specific it will be empty, this is not a problem if a width and height is specified, but I like to cover my bases.) My suggestion would be to simpyl add a paragraph with text.
<div class="Featurebox">
<div class="Boximage"><p>Box 1</p></div>
It should also be noted that if you are floating Featurebox to the left, then it's child does NOT also need to be floated. So you can remove the float: left; on .Boximage
Further more I would suggest you find a good editor to write your code in, something that will color code your elements and highlight the ends of your tags when you are clicked within an element. I personally use notepad++ and dreamweaver, though a lot of people paint a bad picture of dreamweaver, as long as you stay strictly within Code view, then it is a great application to write code with and it features a build in FTP manager.
You're missing the > after the opening part of the .Boximage tag:
<div class="Boximage"</div>
It seems to work if you correct that.
http://jsfiddle.net/CLUTP/1/
I am creating a sample website which has three divisions horizontally.
I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
http://imgur.com/j4cJu
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
I'd refrain from using floats for this sort of thing; I'd rather use inline-block.
Some more points to consider:
Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype
Here's a better way to format your document:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
Here's a jsFiddle for good measure.
I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}
<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>
Just had to add display:flex to the container! No floats required.
You can use floating elements like so:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
Note the overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).
Easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future
It's not good practise to code inline css , and also ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.
Here in your question
I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-child selector.
I want to point few things here
Do not use inline css ( it is very bad practise )
Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.
Codepen link for my answer
https://codepen.io/feizel/pen/JELGyB
.wrapper {
width: 100%;
}
.box {
float: left;
height: 100px;
}
.box:nth-child(1) {
width: 25%;
background-color: red;
}
.box:nth-child(2) {
width: 50%;
background-color: green;
}
.box:nth-child(3) {
width: 25%;
background-color: yellow;
}
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
You add a
float: left;
to the style of the 3 elements and make sure the parent container has
overflow: hidden; position: relative;
this makes sure the floats take up actual space.
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Also please note that the width: 100% and height: 100% need to be removed from the container, otherwise the 3rd block will wrap to a 2nd line.
Get rid of the position:relative; and replace it with float:left; and float:right;.
Example in jsfiddle: http://jsfiddle.net/d9fHP/1/
<html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
The problem is that the border of div#content also appears in div#navigation?
<html>
<head>
<title>WUI</title>
<style type="text/css">
div#header {
}
div#navigation {
float: left;
padding-right: 20pt;
}
div#content {
border: 5px groove;
}
</style>
</head>
<body>
<div id="header">
<h1>WUI</h1>
</div>
<br />
<div id="navigation">
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</div>
<div id="content">
<p>I like when you ride with that booty on me!</p>
</div>
</body>
</html>
EDIT: I want the left side (navigation) to appear as a sidebar to the left and the content after that (to the right). I'm applying the border to the content but that border also appears in div of navigation. I hope it is clear now.
You need an overflow: auto; for your div#content. It's magical, hence no explanation will be given:
div#content {
border: 5px groove;
overflow: auto;
}
Well, after your edit, I can see your border isn't the problem. I usually do this:
html
{
background-color: white;
}
body
{
padding-left: 200px;
background-color: green;
}
#navigation
{
position: fixed;
width: 200px;
left: 0px;
top: 0px;
}
It makes you navigation static, and the content just magically works. The downside is that you have to use pixel-based layouts, which I don't really like doing. It's your choice.
Here's a semi-relevant thing I made a while back. See if it works for you: http://jsfiddle.net/dDZvR/12/
navigation is floating, which means it's taken out of the document flow, and the next element (content) moves up to take it's place.
However, navigation still has to float somewhere, so it's taking up space inside content.
To avoid this, either float content as well, or put a left margin on it equivalent to the width of navigation.
edit: after seeing your edit, I'd say the left margin idea would definitely be the better one.
you need to give float to the content because you give float to the navigation.
use this example:
<style type="text/css">
div#header {
}
div#navigation {
float: left;
padding-right: 20pt;
}
div#content {
float: left;
border: 5px groove;
}
</style>
It's because of how floats work. You're going to have to put a margin on #content or something like that.
It can be corrected by adding a left margin to the div#content. The corrected code is here - http://jsfiddle.net/sparky/vctcN/
you can add a
float: left;
in content and set the width yourself
This one may works:
WUI
<style type="text/css">
div#header {
display:block;
}
div#navigation {
width:150px;
float:left;
}
div#content {
border: 5px groove;
margin-left:160px;
}
</style>
</head>
<body>
<div id="header">
<h1>WUI</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</div>
<div id="content">
<p>I like when you ride with that booty on me!</p>
</div>
</body>
I have created two rounded corner boxes which i would like to be aligned next to each other .But the 2nd box is appearing directly below the first one inspite of me using float:left on the 1st one. Any way to fix this would be really helpful. Below are the html and the css.
The HTML :
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="layout.css"/>
</head>
<body>
<div id="containerDiv">
<!-- Box 1 -->
<div id="box1" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
<!-- Box 2 -->
<div id="box2" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
</div>
</body>
</html>
The CSS :
#containerDiv {
width: 1000px;
}
.boxDiv {
width: 248px;
}
.upperRound {
background-image: url('rounded_upper.gif');
height: 20px;
}
.lowerRound {
background-image: url('rounded_lower.gif');
height: 20px;
}
.boxContent,.boxTagLine {
border-left: 2px solid #B5B5B5;
border-right: 2px solid #B5B5B5;
padding: 10px;
background-color:#F8F8F8;
solid #B5B5B5;
}
.boxTagLine {
color:#0066FF;
}
#box1 {
float:left;
}
Second div must float to right and next element should clear float. I'll add more info in a second.
I was a bit wrong. You even don't need clearing div.
Check out this question.
So - in your case, add this to css=>
#box2 {
float:right;
}
#containerDiv {
width: 1000px;
overflow: hidden;
}
I didn't try it, but it should work.
Mine approach will leave space between boxes. So - it might be not desired effect.
You would be better off using spans
But if you have to use divs :
.boxDiv {
width: 248px;
display: inline;
}
float both boxes left:
#box1,#box2 {
float:left;
}
You'd be better off floating your .boxDiv left, like so:
.boxDiv {
width: 248px;
float: left;
}
That way if you add more boxes they'll float straight away, otherwise you'd have add the specific class names:
#box1, #box2, #box3, #box4 {
float:left;
}