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>
Related
Despite of other people having the same issues I still couldn't get it to work, so I'll really need your help.
I'm currently writing a guestbook in php with a html-template but I have the issue that my divs don't use the min-height properties that I set if they are a percentage. I wanted to make the whole page responsive for all resolutions and window-sizes so that's why I'm trying to avoid fixed heights.
The following is my html-markup:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</body>
</html>
As my CSS-file is quite big I will only give you the important parts:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
}
body {
height:100%;
width:calc(70% - 2px);
margin-left: calc((30% - 2px) / 2);
position: absolute;
}
#wrap_main {
background: rgba(255,255,255,0.7);
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
margin-top: calc(1% + 4px);
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 550px;
width: 95%;
}
If you need more parts, please write so in the comment. I'm sorry if the code is a little messy but I haven't yet cleaned it up...
My problem is, that the #wrap_content and #content can't have a percentage height and I don't know why but it just won't work.
Did I make a mistake somewhere along the way and just don't see it?
What do I need to change, so that the #wrap_main is always as big as it's content? How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Do I need to change something in the html-markup?
If you see anything else that I could do better, please advise. I'm still very new to php, html and css but I'll welcome every help I can get. Thanks in advance.
If you want to check out what the page looks like at the moment click here. Be aware that not everything is working correctly yet, but if you want to register yourself, you're highly welcome to test it out.
EDIT:
I had to change the html-markup a little and adapted the css quite a bit thanks to the idea of William, thanks again:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="whity_layer">
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</div> <!-- whity_layer -->
</body>
</html>
And CSS:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
z-index: -1;
}
body {
height: 100%;
max-height:auto;
width:100%;
position: relative;
z-index: 0;
}
#whity_layer {
background: rgba(255,255,255,0.7);
margin-left: calc((30% - 2px) / 2);
width: calc(70% - 2px);
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
}
#wrap_main {
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
top: 45px;
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 100%;
width: 95%;
}
I'll have yet to decide the min-height of the content-wrapper, but I'll figure it out.
EDIT 2
I have to add that at the moment I have a scrollbar on the whity_layer if the content overflows (overflow: auto) which I can't get rid of for the time being... every homebrew attempt I found wouldn't work with my markup... Nowadays it should be easier to hide scrollbars with css in my opinion...
What do I need to change, so that the #wrap_main is always as big as it's content?
You don't need to use height or min-height to have the #wrap_main always as big as it's content.
How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Just take the height and min-height out of the CSS
Do I need to change something in the html-markup?
Not really, just change the CSS.
Here is a jsfiddle without the height and min-height on CSS that will adjust it's height according the content.
EDIT:
If you just need a whity background, you might consider this:
Create a new div #whity_layer and make it absolute before all the other divs:
<body>
<div id="whity_layer"></div>
<div id="wrap-main"></div>
.........
Change the CSS to:
body {
position: relative;
}
#whity_layer {
background: rgba(255,255,255,0.7);
position: absolute;
width: 100%;
height: 100%;
}
#wrap_main {
// Remove background
}
A time ago i tried to find a css alternative to make my div always as big as it's content, but as long as i remember that was horrible/hard, i'am sorry that i can't really answer you, but if you want to try with another method you can use AngularJs with, for exemple, ng-style so you can give your divs a "dynamic" size.
The rest is all about algorithm :).
Good luck mate :3
I have a very simple test site that I am using to practice some of my CSS skills. I cannot get the two main divs to match the height of the wrapper. I have a color coded example at the bottom of this post.
I had read somewhere that if I use the overflow property in my css file, that should take care of the problem. I tried both overflow: hidden and overflow: auto. Overflow: hidden did get the wrapper to be the right length, but the sidebar still wasn't long enough.
I'm sure this is something that is very simple and I know there are many tutorials out there on this issue but I cannot seem to understand what they are doing.
Here is my css file:
#wrapper {
background-color: green;
height: auto;
width: 1024px;
}
#head {
background-color:blue;
width: 100%;
height: 100px;
}
#sidebar {
background-color:red;
float: left;
width: 50px;
height: 100%;
}
#menu {
background-color:yellow;
float: right;
width: 974px;
height: 50px;
}
#content {
background-color:orange;
float: right;
width: 974px;
height: 100%;
}
I have three php files that come together to make the index page.
header.php
<html>
<head>
<title><?php echo $pageTitle; ?></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
footer.php
</body>
</html>
index.php
<?php
$pageTitle = "Home";
require_once('includes/header.php');
?>
<div id='wrapper'>
wrapper
<div id='head'>
head
</div>
<div id='sidebar'>
sidebar
</div>
<div id='menu'>
menu
</div>
<div id='content'>
content
</div>
</div>
<?php require_once('includes/footer.php'); ?>
Add the following to your #wrapper...
position: relative;
overflow: hidden;
And the following to your #sidebar...
position: absolute;
For example of how it all works out, see: http://jsfiddle.net/AeLJQ/
Alright I know this has been asked a million time and I have seen a million answers about the body and html tags needing to be a height of 100% for it to work but I cannot get this thing to work. Here it is the problem:
I need my body inside and sidebar content to extend down to meet the other wherever the other stops. I need this for dynamic pages for wordpress. So here is the header.
header.php
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
!!!!content cut to save space!!!!!
</head>
<body <?php body_class(); ?>>
<div id="site">
<div id="wrapper">
<!------break-from-header------>
<div id="wrapperbody">
<div id="bodyinside">
The index.php pages and post.php pages anything with content are calling the header above and footer below. Self explanatory right?
footer.php
</div><!--body-inside-->
<div id="sidebar">
<?php get_sidebar(); ?>
<div id="sidebarlight">
</div>
</div>
</div><!--wrapper-body-->
</div><!--main-wrapper-->
<div id="footer-wrapper">
<div id="footer">
<div id="footer-nav">
<?php wp_nav_menu(array('theme_location' => 'footer-menu')); ?>
</div><!--footer-nav-->
<div id="copyright">
<p>Powered by: WordPress Copyright 2013</p>
</div><!--copyright-->
</div><!--footer-->
</div><!--footer-wrapper-->
</div>
</body>
</html>
and Finally the css
/******************************Basic CSS**************************************/
html,
body {
background-image:url('http://patriotvoice.net/wp-content/uploads/2013/11/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
color: #000;
font-family: 12pt/12pt 'Source Sans Pro', sans-serif;
height:100%
line-height: 100%;
margin: 0px auto;
padding: 0px;
}
/*********************************Wrappers********************************/
#site {
float: left;
width: 100%;
height: 100%
}
#wrapper {
height: 100%;
}
/*****************Main Body******************/
#wrapperbody {
display: block;
background: #ffffff;
padding-top: 70px;
width: 1100px;
height: 100%;
margin: auto;
}
#bodyinside {
display: inline;
background: #fff;
width:740px;
height: 100%;
float:left
}
/**************Sidebar******************/
#sidebar-wrapper {
display: inline;
background: #2E2E2E;
float: left;
position: relative;
width: 340px;
height: 100%;
}
I took out a lot of code but that is the basic stuff. Like I said I need the sidebar and body inside to align with one another. You can see where the content extends past the sidebar and I need the grey to extend down to meet with the white here http://patriotvoice.net..... BUT I need the white to extend down to the grey on a page like this http://patriotvoice.net/news
I think u should use min-height:100%; for all wraps and contents, because u gave body and html tags height:100%;
// sorry, probably I didn´t read your problem well, I'm trying harder with my English but with no significant result
Well first off the site given is looking weird because of the position: fixed on the nav-main-wrapper. Your content is being pushed upwards because of that.
For better coding practices have a header.php, content.php(with the loop), sidebar.php, footer.php to call to the index.
Your height should work fine according it the content you put in it.
Post an example of how it looks with more content for me to better understand how the height:100% isn't working so I can further assist you.
I want to overlay one image on other using CSS-PHP. Please see the below HTML and CSS snippet and give ur wise suggestions:
The images are present in header part of the division:
j_logo.jpg and MMPHero3.jpg. Of which former should be transparent and in left container while later one should occupy entire header region.
<body>
<div id="container">
<div id="header">
<div id="header-left-container">
<img src="j_logo.jpg" alt="jubilant"/>
</div>
<div id="header-right-container">
<img src="MMPHero3.jpg" alt="drug"/>
</div>
</div>
<div id="content"> Sidebar <p> </p>
<div class="form">
<p>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<p>Enter Drug Name </p>
<input type="text" name="drugName" value="<?php echo (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>">
<!--To retain search query after click added value="<?php echo (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>*/-->
<!-- This is commenting style in HTML -->
<p><input type="submit" value="search"></p>
</form>
</div>
</div>
<div id="sidebar"> Body
</div>
<div id="footer"> </div>
</body>
</html>
CSS style-sheet is below:
body {background: #ffffff;}
a {color: #2b2bf6;}
h1 {font-size: 30px;}
#container
{width:1000px;
margin: 0 auto;
background: #dddddd;}
#header
{height: 150px;
margin: 0px;
padding: 0px;
background: #FFFFA3;}
#header-right-container img
{border:none;
width:80%;
height:150px;
float: right;}
#header-left-container
{width:20%;
float: left}
#header-left-container img
{border:none;
width:100%;
height:150px auto;
float: left;}
#sidebar
{
position:relative;
width: 80%;
height: 400px;
float:right;
background: #FFFFA3; ;}
#content
{
position:relative;
width: 20%;
height: 400px;
float: left;
background: #f0e811;;}
#footer
{width: 100%;
height: 70px;
float: left;
background: #000000;
div.result
{
width:88%;
padding:5%;
border:5px solid gray;
margin:5px;
align:center;
}
div.form
{
width:180px;
padding:5%;
border:5px solid gray;
margin:50px;
align:center;
float:right;
}
table, td, th
{
border:0.5px solid blue;
align:center
}
th
{
background-color:#3886FC;
color:white;
}
I believe you should set the style to be something like "position:absolute; left:100px; top:100px; opacity:0.3;" for the image element on top.
Use style="opacity:0.5;" where opacity can be any val from 0.1 to 1
and for overlapping the img onto another you need to specify style="z-index:1;", the higher the z-index more priority will be given to it.
I am useless at CSS and I am trying to create a two column equal width effect. The only issue is that I have some existing html that has to sit in the left hand box and will need to add elements to the right hand box.
This is the source that will be in the left hand side (I have included the CSS inline):
<div id="photoContainer" style="position:relative; width:400px; height: 400px;background:#845454;margin-left:20px;overflow: hidden;" >
<img id="imgPhoto" style="z-index:1000; position:absolute; left:60px; top:23px; width:280px; height:354px" alt="photo" src="images/model.png" class="resize" />
<img id="imgFrame" style="z-index:1005; position:absolute; left:0px; top:0px; width:400px; height:400px" alt="frame" src="images/wigs/Wig1.png" />
</div>
Try as I might, I can not get the CSS right to display the above in the left hand side and further controls in the right hand side.
Hopefully you can help me.
Thanks
not very clear what you have to do but in general:
<div id="container">
<div id="column1">...</div>
<div id="column2">...</div>
</div>
CSS:
#container {
float: left;
width: 100%;
}
#column1, #column2 {
width: 50%;
float: left;
}