Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
my problem is the Divs want to sit side by side. I do not want this I want them to sit on top of one another.I just cant seem to get them to sit vertically. Horizontal is not a problem.
.section is the one on top.
.sectionn is to be underneath.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Main Menu</title>
<link rel="stylesheet" type="text/css" href="Index.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="Slider.js"></script>
<link rel="stylesheet" type="text/css" href="imageSlider.css">
<link rel="stylesheet" type="text/css" href="Page.css">
</head>
<body>
<div class="header">
<h1>Title</h1>
</div>
<div class="nav-left">
London<br>
Paris<br>
Tokyo<br>
</div>
<div class="nav-right">
London<br>
Paris<br>
Tokyo<br>
</div>
<div class="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div class="sectionn">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div class ="imageSlider">
<h1 class ="imageTitle">Slideshow</h1>
<img class="imageHolder" onclick="changeImage()" src="a.jpg" >
<input class = "btnNext" type="image" src="btnNext.png" onclick="Next()" alt="Next Image" />
<input class = "btnBack" type="image" src="btnBack.png" onclick="Back()" alt="Last Image" />
</div>
<div class="footer">
Copyright © W3Schools.com
</div>
</body>
</html>
body { /*Sets page background-colour*/
width:100%; /*Sets page width*/
height:100%;
min-width: 1000px;
margin:0;
padding:0;
background-color:black; /* #404040*/
}
.header >h1{
position:relative;
top:-25px;
}
.header {
height:30px;
position:relative;
background-color:red;
color:white;
text-align:center;
padding:5px;
}
.nav-left {
line-height:30px;
background-color:#eeeeee;
height:480px;
width:100px;
float:left;
padding:5px;
}
.nav-right {
line-height:30px;
background-color:#eeeeee;
height:480px;
width:100px;
float:right;
padding:5px;
}
.section, .sectionn{width:100%; display:block;margin:0;padding:0;}
.section {
position:relative;
background-color:blue;
color:white;
width:350px;
float:left;
padding:10px;
}
.sectionn {
position:relative;
background-color:purple;
margin-top:300px;
margin-left:100px;
color:white;
width:350px;
padding:10px;
}
.footer {
background-color:red;
color:white;
clear:both;
text-align:center;
padding:5px;
}
Rename your sections they are too similar for the background color to take effect. also take away the float:left, and the margins in sectionn
updated css:
.section1 {
position:relative;
background-color:blue;
color:white;
padding:10px;
}
.section2 {
position:relative;
background-color:purple;
color:white;
padding:10px;
}
.section1, .section2{width:350px; display:block!important; margin:0!important padding:0!important}
add this to your css
Here is an another way to do this , assuming "cont" is the container of section and section
.cont{
background-color:white;
margin:auto;!must
display:block;
width:30%;
position:relative
}
.nav-left {
margin:5 px
line-height:30px;
background-color:#eeeeee;
height:480px;
width:30%;
float:left;
padding:5px;
}
.nav-right {
line-height:30px;
background-color:#eeeeee;
height:480px;
width:30%;
float:right;
padding:5px;
}
.section {
background-color:blue;
color:white;
padding:10px;
position:absolute;
top:0;
}
.sectionn {
background-color:purple;
color:white;
padding:10px;
z-index:-10; /*will let you control which div to show up*/
position:absolute;
top:0
}
Related
This question already has answers here:
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 6 years ago.
I don't know if the title is describing it correctly but anyway;
in this jsfiddle I have a div containing two inline-block divs ..they are aligned with no problem .. but whenever there's content in the yellow div this div strangely overflows .. check this out
I want to know why is that and how to fix it
html:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
</head>
<div class="header">
<div class="logo-container">
<p class="logo"><span class="seven">7</span>asobate</p>
<span class="slogan">Web Developer and Data Scraper</span>
</div><div class="header-nav-container">
</div>
</div>
css :
*
{
margin:0;
}
.header
{
width:100%;
height:65px;
background-color:gray;
}
.logo-container
{
display:inline-block;
position:relative;
background-color:green;
height:65px;
width:22.5%;
padding-left:1%;
}
.logo-container .logo
{
position:absolute;
font-size:30px;
font-family: 'Black Ops One';
}
.logo-container .logo .seven
{
color:blue;
font-size:40px;
}
.logo-container .slogan
{
position:absolute;
margin-top:40px;
font-size:12.5px;
font-family:'Black Ops One';
}
.header-nav-container
{
margin-left:70px;
display:inline-block;
background-color:yellow;
height:65px;
width:10%;
}
(psst .. do you think it's fully legal to address myself as data scraper ?)
Well i am sorry i am not sure why its happens but the solution is using vertical-align: top
.header-nav-container
{
margin-left:70px;
display:inline-block;
background-color:yellow;
height:65px;
width:10%;
vertical-align: top;
}
Example : https://jsfiddle.net/omy1p00y/5/
My divs do not stack up next to each other
What do I do?
One div comes below the other.
I tried all types of positioning and even relative but it doesn't work.
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="author" content="Chaitanya Gupta">
<meta name="keywords" content="Fashion, Learning, Resources ">
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy&effect=3d-float' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bad+Script&effect=3d-float' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="favicon.ico">
<title>FLR</title>
CSS
<style type="text/css">
hr
{
color:white;
border-width: 2px;
border:medium silver dashed;
}
a:link,a:visited
{
display:block;
color:white;
}
a:hover,a:active
{
background-color:#7C868E;
text-decoration: underline;
border-radius:8px
}
a
{
font-family: "Century Gothic";
font-variant:small-caps;
font-size: 20px;
}
#emboss
{
border-right: 4px solid #2b2b2b;
border-bottom: 4px solid #2b2b2b;
}
#subTopic
{
font-family: 'Luckiest Guy', cursive;
font-size:60px;
font-weight:lighter;;
font-variant:small-caps;
}
#content
{
color:white;
font-family: 'Bad Script', cursive;
font-size:20px;
}
div.menu
{
background-color:#4A5662;
float:left;
width:150px;
height:210px;
border-radius:8px;
margin-top:20px;
margin-left:5px;
text-align:center;
padding-top:10px;
padding-bottom:10px
}
div.content
{
float:right;
}
</style>
<script>
</script>
</head>
HTML
<body background="denim.jpg">
<img src="fas.jpg" style="float:right; height:80px; width:200px;">
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div id="emboss" class="menu" >
About</span>
<br>
<a href="" >Careers</a>
<br>
Clients
<br>
Blogs
<br>
Contact Us
</div>
<div class="content" id="display">
<h1 id="subTopic" class="font-effect-3d-float">About</h1>
<p id="content">FASHION LEARNING RESOURCES (FLR) is a Gurgaon,
India based small company pioneering Fashion Education &
Training Technology(FETT) products, services, consulting and
delivery services in FETT for the fashion institutes,
industry bodies and government. FLR also offers E learning
& multimedia content in Fashion / apparel Domain.
FLR is started by founding alumni batch of NIFT.</p>
</div>
<!--<hr style="position:absolute; bottom:30px; width: 1200px">
<code style="color:white; position:absolute; bottom:10px">Copyright © 2013 Fashion Learning Resources. All rights reserved.</code>
-->
</body>
</html>
Try this
div.content
{
margin:0 0 0 160px;
}
It may also be useful to wrap a div around menu and content with a spacific width and then make sure menu and content added together with margins and padding are that width.
div.wrap { width 800px}
div.content {width:640px}
Use the display property in your div, and all divs with this will stack horizontally.
display: inline-block
Use display:inline-block within the CSS definition, that should stack them horizontally for you.
div.content
{
width:calc(100% - 160px);
float:right;
}
This should work
This will keep the div with class menu to the left and the content div in the right
Fiddle
div.menu
{
background-color:#4A5662;
height:210px;
border-radius:8px;
margin-top:20px;
margin-left:5px;
text-align:center;
padding-top:10px;
padding-bottom:10px
}
div.menu a{
display:inline-block;
}
and remove <br/> tag after every anchor
<div id="emboss" class="menu" >
About</span>
<a href="" >Careers</a>
Clients
Blogs
Contact Us
</div>
Its easy just do
div.content
{
/*float:right;*/
}
if you want to make it float:right just give it width, check my fiddle http://jsfiddle.net/GafgA/1/
Remove float: right and add a margin - http://jsfiddle.net/xEGRg/
div.content {
margin-left: 230px;
}
So right now I'm starting a website im working on by just getting everything positioned and formatted on the page before i try to stylize it more and add some javascript. Oddly, i added three div tags after my form for the next row to be split into three columns. On my css sheet I added a border just so i can see the size of the boxes and the headings. Problem is nothing is showing up. Any help would be appreciated because i bet its something really simple.
<!doctype html>
<html lang="en"">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="operationStyle.css">
<title>Operation:Educate Children</title>
<script language="javascript" type="text/javascript">
image1=new Image();
image1.src="supermario.png";
image2=new Image();
image2.src="mario.png";
</script>
</head>
<body>
<header class="header">
<img src="mario.png" alt="header"/>
<h2>"Only the educated are free-Epictetus"</h2>
</header>
<table>
<tr>
<th>Home</th>
<th>About Us</th>
<th>Current Project</th>
<th>Get Involved</th>
<th>Calendar</th>
<th>Donate</th>
</tr>
</table>
<div id="slideshow">
<img class="slide" name="slide" src="supermario.png" width="100" height="200">
<script>
var step=1;
function slideit(){
if(!document.images)
return;
document.images.slide.src=eval("image"+step+".src")
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
<div>
<div class="contact">
<h2>Contact Us!</h2>
<form action="contact.php" method="post">
<strong>Name:</strong>
<input type="text" name="name"><br></br>
<strong>E-Mail:</strong>
<input type="text" name="email"><br></br>
<strong>Message:</strong>
<textarea name="message" cols="25" rows="12"></textarea>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form
</div>
<div class="events">
<h3><strong>Upcoming Events</strong></h3>
</div>
<div class="follow">
<h3><strong><Follow Us!></h3></strong>
</div>
<div class="blog">
</div>
</body>
</html>
BODY{
margin-left:15%;
margin-right:15%;
}
.header h2{
color:blue;
text-align:right;
border:5px solid black;
font-family:'Bookman Old Style',serif;
font-size:10pt;
font-style:italic;
width:28%;
float:right;
height:200px;
}
.header img{
width:70%;
float:left;
border:thin black;
height:200px;
}
table{
border:5px solid black;
width:100%;
height:75px;
clear:left;
}
.slide{
border:5px solid black;
width:70%;
height:400px;
float:left;
}
.contact{
border:5px solid black;
width:27%;
height:400px;
float:right;
}
.contact h2{
text-align:center;
}
.contact form{
margin-left:2%;
}
img.slide{
position:absolute;
left:0;
top:0;
}
#slideshow{
position:relative;
overflow:hidden;
}
.events{
float:left;
width:33%;
border:black;
height:200px;
}
.follow{
float:left;
width:33%;
border:black;
height:200px;
}
.blog{
float:left;
width:33%;
height:200px;
border:black;
}
Look at this line :
<h3><strong><Follow Us!></h3></strong>
You are using < and > inside the strong tag. This can screw up your HTML. Also your tags are not in the right order, you should change the line to this :
<h3><strong>Follow Us!</strong></h3>
Also, your last form's closing tag is not closed properly.
There are a couple closing tags that are out of order:
<div class="follow">
<h3><strong><Follow Us!></h3></strong>
</div>
</h3> and </strong> need to be reordered to be <h3><strong><Follow Us!></strong></h3>
You're also missing a closing form tag. </form lacks a closing >.
Change your CSS to read:
.events, .follow, .blog { // they are all the same, why having three times as much code?
float: left;
width: 33%;
border: 1px solid black;
height: 200px;
}
Then fix the missing > in </form
You also have missed the / in the slideshow div at the end </div>
(and fix the tag pointed out by Dany (<Follow Us!> > Follow Us!)
Then you will see the DIVs
As has been pointed out, your HTML code has several syntax errors, which made browsers render the 3 <div>s you added inside of the <div class="contact"> — and since the height of that was specified they were cut off.
On my computer I have it perfectly looking, it is a 17"
I went to see my web under development on www.hrcprojectconsulting.com on another computer, an old screen of 1080 x 600 i think
and the right panel has dislocated itself from its position and taken the middle container
I conceived it as One main container that wraps, a left container, a center container and a right container. I positioned the main container centered with margin: 0 auto; and it all looked good. Then I had to had the banner, the blue stripe that you will see:
This is my blueprint for all pages:
<link rel="stylesheet" href= "<?php echo base_url() ?>css/style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
<div id = "contenedor_principal">
main wrapper
<div id = "left_container">
content for left panel
</div>
<div id="container-center"><!-- 1 -->
content for the center panel
</div> <!-- end of container center 1 -->
<div id = "right_container">
and for the right panel
</div>
</div>
and this is the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1>
<body>
And this is the CSS:
#contenedor_principal
{
background:orange;
width:1040px;
margin: 0 auto;
}
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#FFFFFF;
}
#container-center{
width:635px; /*** Set to = center col width ***/
height:500px;
font-size:8px;
display:inline;
position:absolute;
left:485px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#left_container{
width:200px; /*** Set to = center col width ***/
height:500px;
float:right;
margin-right:0px;
font-size:8px;
display:inline;
position:absolute;
left:275px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#right_container{
width:202px; /*** Set to = center col width ***/
margin-left:0px;
height:600px;
float:right;
font-size:8px;
display:inline;
position:absolute;
right:260px;
background:url('../assets/uploads/miweb/bg_body.png');
background-repeat:repeat-x;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#header {
float:inherit;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
height:75px;
h2 {color:#ffffff;}
}
Than can anyway be seen live on my web like I said. I am using 1660 x 900 and 17" but it should be viewable on any resolution and screen.
Any clue as to why it went all upside down?
thank you
The layout you are using is wrong. no need to use position: absolute for every div and then set the top and left.
Instead of that follow the below structure.
HTML
<html>
<head>
<title>Website</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div id="left_content"></div>
<div id="middle_content"></div>
<div id="right_content"></div>
</div>
</div>
</body>
</html>
CSS
#container {
width:960px;
margin:0 auto;
}
#header {
background: blue;
height:50px;
margin-bottom:20px;
}
#left_content {
float: left;
width:150px;
background: red;
min-height: 600px;
margin-right:20px;
}
#middle_content {
float: left;
width:620px;
background: green;
min-height: 600px;
margin-right:20px;
}
#right_content {
float: right;
width:150px;
background: red;
min-height: 600px;
}
Live Demo
Hope this will help you.
Well, in your css, you clearly coded everything in order it comes correctly only on your screen.
In particular what is going wrong is your #right_container in which you say float:right and than right:260px.
A quick (but bad) solution to your css would be to put float:left instead of float:right and define the number of pixels from the left left:1190px (1190 is approximate)
A better solution would be learn properly css and play with it afterwards!
My HTML is simple, I have a content area that wraps around everything and inside it I want three columsn. Two of them have to have fixed widths, and main content area should be flexible.
I wonder what I'm doing wrong - EDIT here is the complete code sorry if it's a bit long!:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
<ul id="topuserbar">
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li>Mis Anuncios</li>
<li>Perfil</li>
<li>Ayuda<img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li>Cerrar Sesion</li>
</ul>
</div>
<div id="headershadow">
</div>
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea"></div>
<div id="advertisingarea">
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>
body
{
background-image: url('images/test.png');
background-repeat:repeat;
margin:0;
padding:0;
}
#header
{
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#headershadow
{
background-color:Black;
min-height:2px;
}
#topuserbar
{
font-family:Georgia;
font-size:large;
float:right;
margin-top:35px;
margin-right:15px;
}
#topuserbar ul
{
}
#topuserbar li
{
display:inline;
margin-left:10px;
color:#fff;
}
#topuserbar .helpicon
{
position:relative;
top:4px;
left:2px;
}
#topuserbar a
{
color:White;
}
#topuserbar a:hover
{
color:Yellow;
}
/*****************BODY AREA*******************/
#body
{
border: 1px solid red;
min-height:800px;
width:960px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:590px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
Could it be because of the cumulative 1 pixel border?
Sergio, I'm not sure if this is going to be the answer but try replacing borders with outlines. Borders have a pixel width whereas outlines don't. This may, possibly, solve your problem.
CSS usage: outline{1px solid red;}
Could it be:
#headershadow
{
background-color:Black;
min-height:2px;
The height and padding above/below the <ul id=topuserbar> is pushing down the second and third divs.
Add height:43px; (or greater) to #header to push elements below it down and that will line up the 3 body divs.
Firebug is your friend!