I have a strange problem with my CSS / HTML.
I have a LI which contains two DIV, each 15px height:
But all the browsers compute the height of the LI > 15px.
Also the elements are vertically displaced.
In my opionen the LI should have a height of 15px.
The first DIV inside the LI is a text, and the second DIV is just there to display an background image.
If you check the height with the Firefox Developer Tools, the height of each div is not higher than 15px.
Can someone explain to me why this is happening ?
Just open the code below in the newest Firefox.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body style="font-size:12px;">
<div style="min-height:500px; width:20%; margin:auto; background-color:red;">
<ul style="background-color:green;">
<li style="background-color:yellow;">
<div style="display:inline-block;width:90%">li #1</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</li>
<li style="background-color:yellow;">
<div style="display:inline-block;width:90%">li # 2</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</li>
</ul>
</div>
</body>
</html>
No additional CSS is used.
If you replace the LI with DIV, it has still the same behaviour
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body style="font-size:12px;margin:0;padding:0;">
<div style="min-height:500px; width:20%; margin:auto; background-color:red;">
<div id="parent1">
<div style="display:inline-block;width:90%">li #1</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</div>
<div id="parent2">
<div style="display:inline-block;width:90%">li # 2</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</div>
</div>
</body>
</html>
If I give the inner div's of the parent divs the style attribute "float:left;" everything looks as it supposed to be. I want to understand why the browser give the parent div the addiotional 4px, and make it look shitty.
If you set the height of the parent DIV to 15px, it looks how it supposed to be. But if you don't set the height, the height is 18px. How does the browser calculate 18px ? The height of each child is only 15px.
because inline layout has space. like:
<div style="background-color: black; width: 50px">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
<!-- there is a space here, maybe 4px or other size -->
</div>
so the problem is how to remove inline space. There are some methods:
use font-size: 0 , which can set "space" 0 also.
<div style="background-color: black; width: 50px;font-size:0">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
make child be block. because block elment dosen't leave space.
<div style="background-color: black; width: 50px">
<div
style="
display: block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
use float(not recommended now, use flex instead)
<div style="background-color: black; width: 50px; overflow: hidden">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
float: left
"
/>
</div>
use flexbox
<div style="background-color: black; width: 50px; display: flex">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
you can learn from below links also:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
How do I remove the space between inline/inline-block elements?
It’s because you are making the DIVs inline-block, which means they will be laid out in the line box like any other inline element, and that means leaving space for the underlengths of potential text on the same line.
vertical-align: bottom for the DIVs will fix that.
Related
i have two div elements that float on both sides (Left And Right). i applied hr tag after closing the first div tag (That floats left) and before opening the next div tag (That floats right). But the hr tag is displayed at the top background. To see the hr tag, see the small connecting line between the two divs (At the top).
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.leftmovie {
border: solid;
float: left;
width: 47%;
margin-left: 2em;
height: 400px;
}
.rightmovie {
border:solid;
float: right;
width: 47%;
margin-right:2em;
height:400px;
}
</style>
</head>
<body>
<div class="Row">
<div class="leftmovie">
<span class="Star">ergjkh<br>kdjnkj</span>
</div>
<div class="rightmovie">legnlejgn<br>gegerge</div>
</div>
<hr>
<div class="Row">
<div class="leftmovie">
<span class="Star">ergjkh<br>kdjnkj</span>
</div>
<div class="rightmovie">legnlejgn<br>gegerge</div>
</div>
</body>
</html>
Because you don't use clear: both after applying float property.
Add this in hr tag.
hr {
display: inline-block;
width: 100%;
}
I'm trying to get my textarea and div to be side by side and have the run button underneath but I'm not sure why it isn't working.
The output looks like this:
http://codeeplus.net/test.php
CSS:
.CodeMirror { height: 400px; width: 500px; border: 1px solid #ddd; }
.CodeMirror-scroll { max-height: 400px; }
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
#drawing { border: 1px solid #555555; float:left; width:480px; height: 400px; }
HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; width:50%; height: 50%; border: 1px solid #000000;">
<div style="float:left">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</html></textarea>
</div>
<div style="float:left;">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<input type="button" id="run" value="Run" />
</div>
I would use two div's one to wrap around your text area and one to wrap around your other div. This way you can just use float: left; to put them both side by side :)
your code seems have many problems :), I made some changes:
remove float:left; from divs
set display:inline-block;
add clear:both tag before button
remove width:50%; and height:50% form first div
look at new HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; border: 1px solid #000000;">
<div style="display:inline-block; vertical-align:top;">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</textarea>
</div>
<div style="display:inline-block">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<div style="clear:both"></div>
<input type="button" id="run" value="Run" />
</div>
jsFiddle is here
You should use display: inline-block; property here, on the elements you want to align in one line:
div {
display:inline-block;
}
Online Example
The default value for div tags is display:block;
EDIT 1:
I have checked your page. The div that you're trying to align in is not aligning, because your parent div has width:50% and it's simply not fitting in there. Try changing it to, let's say width:100% and see that it really works!
EDIT 2:
Also remember, that if you use padding, as you apparently do on your page, it's affecting the actual (final) width of the element. For example, if you set the parent div's width: 1200px and padding as padding:10px;, then the actual div's size will be 1160px, cutting 10px on each side.
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 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>
<html>
<head></head>
<body>
<div>
<div style="float: left; width: 300px; border: 1px solid black;">
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div>
<div style="float: left; width: 300px; border: 1px solid black;">
<div style="background: #FF0000; width: 50px; height: 50px; margin-left: auto;"></div>
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
With the above code the left hand side will have variable content and I need the div in the right hand div (the red box) to site at the bottom so its bottom edge is flush with the bottom of the left div height.
I've tried using auto top margin but I believe the problem is that I can't get the height of the right side div to match the left side div.
Is there some way with CSS to do this or do I have to resort to javascript to match the heights?
Is this what you're looking for?
http://jsfiddle.net/7b3Pc/
Basically, the variable div controls the height of all other sibling divs through its parent div. Siblings absolutely positioned and height:100%.
<html>
<head></head>
<body>
<div>
<div style=" width:600px; border: 1px solid black; position:relative">
<div style="width: 300px;">
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div>
<div style="width: 300px; height:100%; position:absolute; top:0;left:300px; border: 1px solid black;">
<div style="background: #FF0000; width: 50px; height:100%; margin-left: auto;">
</div>
</div>
</div>
</div>
</body>
</html>
Have you tried
margin-top: 0;
Is this what you're looking for: http://jsfiddle.net/htfRw/
Tested in Safari, Firefox
EDIT:
Here it is inside a container: http://jsfiddle.net/htfRw/2/
You really don't need to use float here at all. I'd recommend using display: inline-block instead, because you can then rely on the vertical-align property to vertically position your second <div> instead of using margin .
HTML:
<div>
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div><div class="second">
<div></div>
</div>
Note that there is no space between the closing </div> and <div class="second">. Because both of these elements are inline elements, any whitespace in the markup will cause there to be small, horizontal space between the two elements.
CSS:
body > div {
width: 300px;
border: 1px solid #000;
vertical-align: bottom;
display: inline-block; }
.second div {
background: #FF0000;
width: 50px;
height: 50px; }
Preview: http://jsfiddle.net/Wexcode/FwD3Q/