I am creating a web site. This has a menu bar on the left and main content next to it. The problem is if the main part contains something else than plain text then its size has an effect of the starting point of the left menu bar.
Here is a screenshot:
http://kepmegosztas.com/img/0c8013ce70931aad975d91fd76c1cb3e/site.png
"The logged in as user1" should start at the top, but its starting point depends on the size (height) of the textarea. The textarea is resizeable, when I resize it, the content of the left menu "follows" it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sitestyle.css" /><title>
cim1
</title>
</head>
<body>
<div id="header">
cim2
</div>
<div id="wrapper">
<div id="row">
<div id="left">
<span>
Logged in as user1<br/>
</span>
<a href="login.php?logout=1">
(logut)<hr/>
</a>
<a href="index.php?year=2013&month=1">
2013 - 1<br/>
</a>
<a href="index.php?year=2012&month=12">
2012 - 12<br/>
</a>
</div>
<div id="main">
<span>
<form action="/site/blog.php" method="post">
<textarea name="the_text" class="blog">
</textarea>
<input value="Submit" type="submit" /></form>
</span>
</div>
</div>
</div>
</body>
</html>
CSS:
html
{
height: 100%;
}
body
{
background-color: #aabbaa;
margin: 0px;
height: 100%;
}
div#header
{
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: gray;
background-color: #889988;
}
div#wrapper
{
display: table;
table-layout: fixed;
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
}
div#row
{
display: table-row;
}
div#left
{
display: table-cell;
width: 20%;
background-color: #ccddcc;
/*list-style: none;*/
}
div#main
{
display: table-cell;
background-color: white;
}
textarea.blog
{
resize: both;
overflow: auto;
}
Do you have any suggestion how to solve this?
Thanks in advance,
Tamas
Your textarea inside of div#row. Separate it and it will be ok.
As another solution fix div#left to top and set it's height
you set div#left and div#main as a table-cell, so they must have the same heights when resizing. As solution you can add extra layer inside div#left and set position for it, or you can try to span vertical cells, but didn't think that is work on layers. Maybe setting of vertical-align for div#left is kind
Related
I have a HTML page with content divided into left and right part using CSS. The height of left content in smaller than the right content. Hence the right content div goes below to the left content div also. Eventually the border of right content is not a straight line.
How can we avoid the creeping of the right content towards the left?
How can we make the height of left content increased till the height of right content (with javascript)?
<html>
<head>
<title>My Page</title>
<style type="text/css">
.myContent {
width: 100%;
}
.myHeader {
}
.leftPart {
border: 1px solid blue;
width: 200px;
clear: left;
float: left;
background-color: red;
}
.rightPart {
border: 1px solid orange;
width: 100%;
background-color: beige;
}
</style>
</head>
<body>
<header>
<div class="myHeader">
H
</div>
</header>
<div id="body">
<div class="myContent">
<div class="leftPart">
A
</div>
<div class="rightPart">
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" />
</div>
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="Text1" name="SalesAndMarketing" type="text" value="" />
</div>
</div>
</div>
</div>
</body>
</html>
fLoat one element, set margin to the other one.
.leftPart {
border: 1px solid blue;
width: 200px;
float: left;
background-color: red;
}
.rightPart {
margin-left: 200px;
border: 1px solid orange;
background-color: beige;
}
JSBin Demo
Update #1
If you consider using JavaScript, you might want to take a look at equalize.js.
equalize.js is a jQuery plugin for equalizing the height or width of HTML elements.
Here is an example:
// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});
Here is the JSBin Demo.
Update #2
If you're looking for a pure CSS solution, you can use display: table-cell; CSS declaration.
But, honestly, I'd prefer using JavaScript rather than this, because using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table):
#body { display: table; width: 100%; }
.myContent { display: table-row; }
.leftPart {
width: 200px;
display: table-cell;
}
.rightPart {
display: table-cell;
}
Here is the JSBin Demo
Add this style:
.rightPart {
margin-left: 200px;
}
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/
So what I'm trying to do is create a mock up for my own little website in HTML. So everything been going good until just now. What I want to do is display an image and then a title and description next to it, sort of like what youtube does.
Example:
So the way I have it right now it works perfectly if the text doesn't have to drop down to a new line.
Example of it working:
However, if one of them is too long, everything gets messed up, example of messed up:
I set up a JS fiddle to make it easier for you guys. However remember I'm designing with bootstrap so the reason the CSS is so long is because it includes the full bootstrap, however only the first 57 lines is my custom written css. Anyway, if anyone could help me so that when my title or my description is too long it will drop onto the next line like youtube does.
My HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Comments</title>
</head>
<body>
<div class="logo">
<img height="70" width="200" src="/img/logo.png">
</div>
<div class="container">
<div class="leftBar">
<div class="well">
<div class="title">
<h3>Mini Title</h3>
</div>
<hr/>
<div class="contentLink">
<div class="smallContentImage">
<img src="http://i.imgur.com/zesaMhG.gif">
</div>
<div class="smallContentText">
<h5>Title Goes Here</h5>
<em>
Other Informati
</em>
</div>
</div>
</div>
</div>
<div class="rightBox">
<div class="well">
<div class="title">
<h1>Title For Content</h1>
</div>
<p> CONTENT CONTENT CONTENT </p>
</div>
</div>
</div>
</body>
</html>
MY CSS
body {
background #FAFAFA;
}
.title {
text-align: center;
}
.logo {
margin-right: auto;
margin-left: 2%;
padding-top: 2%;
}
.leftBar
{
margin-right: auto;
float: left;
width: 30%;
overflow: hidden;
}
.rightBox
{
margin-left: 0;
float: right;
width: 70%;
}
.contentLink
{
padding-left: 1%;
padding-right: 1%;
width: auto;
height: auto;
}
.smallContentImage {
width: 100px;
height: 100px;
margin-left: 0;
margin-right: auto;
float:left;
}
.smallContentText {
float: right;
width: auto;
margin-left: auto;
margin-right: 0;
width: fixed;
}
JS Fiddle: http://jsfiddle.net/BjSv8/
Thank you
There is no such thing as width:fixed. You need to make sure the widths of the two content items add up to the width of the parent.
Is there any reason you used em instead of div.
If you could use 'div' instead of 'em' and define the width , then your problem could be solved.
<div style="word-wrap:break-word;border:1px solid red; width:100px">
Other Information goes here
</div>
See this fiddle: http://jsfiddle.net/BjSv8/1/
I'm new in web design. I want to design 2 box that one of them is in the left and another one is in the right. The boxes are fix in browser maximize state, but when I resize the browser and make it minimize, right box go down of the left box.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<link type="text/css" rel="stylesheet" href="style.css" />
<title>.: Home :.</title>
</head>
<body>
<div class="main" >
<div class="left" > </div>
<div class="right" >
<div class="search" > </div>
<div class="login" > </div>
</div>
</div>
</body>
</html>
style.css
body {
margin: 0px;
padding: 0px;
background-color: #c4c4c4;
}
div.main {
width: 100%;
display: inline-block;
background-color: red;
}
div.left {
float: left;
width: 300px;
height: 500px;
margin-top: 50px;
margin-left: 100px;
display: inline-block;
background-color: blue;
}
div.right {
float: right;
width: 800px;
height: 500px;
margin-top: 50px;
margin-right: 100px;
display: inline-block;
background-color: green;
}
You need fixed width on your main DIV
div.main {
width: 1350px;
display: inline-block;
background-color: red;
}
Use id where possible instead class, it's faster eg: class="main" could be an ID.
WORKING DEMO
EDIT
If you want 100% width on main div then use a wrapper div with fixed width:
<div class="main" >
<div id="wrapper" style="width:1350px;">
<div class="left" > </div>
<div class="right" >
<div class="search" > </div>
<div class="login" > </div>
</div>
</div>
</div>
Updated DEMO with 100% main DIV
The reason for this is that your boxes are of fixed width, with margins. If you resize the browser window so it is smaller than the amount of space required to show both boxes side-by-side, then the right box will display below the left box, where it has space.
There is no fix for this from the details in your description. However, you should try basing your layout on percentages (e.g. width:25%).
Change div.main width from % to px. Also you can set a min-width so that browser does not reduce the element before that.
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; }.