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.
Related
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.
I'm making a section of a web-page with the div operator. So I've got one big box with smooth edges and some content, but I'd like to create a button inside this box and I would like to use the div attribute again. How would I style this new button through CSS? Obviously I would override my old button if I'd simply change the div attributes in the CSS.
Here's the code so far:
<!DOCTYPE HTML>
<html>-
<header>-
<title> Derps</title>-
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div>
<h1> Derpsps</h1>
<p>
Random text for my website
</p>
<img src="picture1.jpg " class="left"height="300" />
<img src="logo-thingymchee.png" class="right"height="100" />
</div>
</body>
</html>
CSS:
div{
height:800px;
width: 1300px;
border-color:#6495ED;
background-color:#BCD2EE;
border-width:2px;
border-style: solid;
border-radius:5px;
margin: auto;
text-align: center;
}
I'm guessing that what you're trying to achieve is this:
<!-- this is your original box -->
<div class="container">
<!-- this will be the button -->
</div>
</div>
</div>
By adding a class to the first div, you can assign a specific style to it.
You could now do this:
div.container {
height:800px;
width: 1300px;
border-color:#6495ED;
background-color:#BCD2EE;
border-width:2px;
border-style: solid;
border-radius:5px;
margin: auto;
text-align: center;
}
div div {
// Other style here
}
Or any other form of CSS.
I do recommend to use an HTML <button> instead of a <div>.
You can simply use the classes to do that.
Create another div with the class "button"
Style the div.button via CSS
HTML
<div>
<h1> Derpsps</h1>
<p>
Random text for my website
</p>
<img src="picture1.jpg " class="left"height="300" />
<img src="logo-thingymchee.png" class="right"height="100" />
<div class="button">Button</div>
</div>
CSS
div
{
height:800px;
width: 1300px;
border-color:#6495ED;
background-color:#BCD2EE;
border-width:2px;
border-style: solid;
border-radius:5px;
margin: auto;
text-align: center;
}
div.button
{
border-color:#6495ED;
background-color:#BCD2EE;
border-width:2px;
border-style: solid;
border-radius:5px;
margin: 10px auto 10px auto;
text-align: center;
padding: 10px;
width: auto;
height: auto;
display: inline-block;
}
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/
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;
}