When I write a content in my page it will go to right forever and it won't break line, what is the problem? I want the content to stick to the same width but it is okay to over flow on y axis. my code:
<div id="mainBody" style="width: 900px;
height: 750px;
float: right;
background-color: #E9E9E9;">
<div id="div1" style="height: 750px; overflow-y: auto; border:1px solid red; width: auto;">
<div id="div2" style="height:710px; padding: 20px; width: 900px; border:1px solid red;"> Content </div></div></div>
Thank you.
First, i think that the div1 and div2 is the problem, why dont you just do it with one element ?
So it will be like this :
<div id="mainBody" style="width: 900px;height: 750px;float: right; padding: 20px;background-color: #E9E9E9; border:1px solid red; overflow-x: hidden; overflow-y: auto">
Content
</div>
So, #mainBody will wrap it at fixed dimension, with 200px padding, 1px red border, and will overflow scroll vertically
If you want to make the content not float right or even left ,then you need a clear class which clear your float , so that the next time you enter something that will go below everything and not left or right .Here I am providing you the code below , do check out and share if your problem persists.
.clear{
clear:both;
}
The above code will clear both "float right and float left".
If you want to delete just the right float then you may use
.clear{
clear:right;
}
So now after creating the above class just use this in the html section :
Entire Code:
<html>
<head>
<stlye type="text/css">
.clear
{
clear:both;
}
</style>
<body>
<div id="mainBody" style="width: 900px;
height: 750px;
float: right;
background-color: #E9E9E9;">
<div class="clear"></div>
<div id="div1" style="height: 750px; overflow-y: auto; border:1px solid red; width: auto;">
<div id="div2" style="height:710px; padding: 20px; width: 900px; border:1px solid red;"> Content </div></div></div>
</body>
</head>
Related
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}
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.
How do i push my content down once i do (ctrl + mouse scroll) to zoom in , and the content center it self right away.
So i have #div left #div right both beside each other, and once it zooms, #div left will push down #div right ,and #div right will center it self right away.
Here is my jsfiddle sorry please copy and paste http://jsfiddle.net/Tedeee/bBpEm/
HTML
<div id="top">
<br />
hi
</div>
<div id="outer">
<div id="right">right</div>
<div id="left">left</div>
</div>
CSS
div {
outline: red 1px solid
}
#right {
width: 200px;
height: 200px;
float:left;
background-color:red;
}
#left {
width: 200px;
height: 200px;
float:left;
background-color:grey;
}
#outer {
float:left;
clear:both;
text-align: center;
}
Sample website
Try look at the home-section https://coderwall.com/welcome
As you can see once my div got pushed down the # right div wont move to center.
and also i need to center it once it is pushed down.
How do i do this, i really need help. Thanks.
Try displaying your divs as inline-block.
Updated JSFiddle
This comes with some caveats. inline-block elements will have whitespace surrounding them, and there are fixes for that. My preferred method is to add margin-right: -0.36em; to the inline-block elements. There are other fixes you can look up too.
Basic structure is as follows:
HTML
<div id="top"> <br />hi</div>
<div id="outer">
<div id="right">right</div>
<div id="left">left</div>
</div>
CSS
div { outline: red 1px solid }
#outer {
text-align: center;
}
#right {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
#left {
width: 200px;
height: 200px;
display: inline-block;
background-color:grey;
}
<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 an issue with floating divs. I have a container st to fixed width, and I have child elements inside that which are all div elements. What I want is that, I need two elements to be shown in a row. The code that I wrote is as follows.
CSS
#container
{
width: 400px;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 180px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
HTML
<div id="container">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="item1">9</div>
</div>
This can be viewed at Demo1
But what I want is like this result. The only thing is that the height of the individual items can be different.
Hope I have made everything clear.
Thanks in advance
Additional clarification
The content elements will be generated dynamically in server and will be passed to the client.
Also the order should be like 1,2,3,4,...
The only thing is that in a row there should be two items and the first one should be aligned to the left side of the container.
You can't accomplish that with CSS only, but there is a jQuery plugin to do the trick. It's called jQuery Masonry, give it a try
You need a second wrapper:
<div id="container">
<div class="wrapper"><div class="item1">1</div></div>
<div class="wrapper"><div class="item1">2</div></div>
...
</div>
Float the wrapper and give it a fixed size. The items inside can have their own height.
I prefer using lists for this type of thing. Better HTML semantics.
<div class="container">
<ul>
<li><div class="item1">1</div></li>
<li><div class="item2">2</div></li>
</ul>
</div>
style:
.container ul {
width:400px;
}
.container li {
float:left;
height:200px;
width:180px;
}
If you want each pair of items to be in a row, and you have control over the dynamic generation of the content, see my edits to your fiddle here
To summarize:
Markup -
<div id="container">
<div class="itemrow">
<div class="item1">1</div>
<div class="item1">2</div>
</div>
<div class="itemrow">
<div class="item2">3</div>
<div class="item1">4</div>
</div>
<div class="itemrow">
<div class="item2">5</div>
<div class="item1">6</div>
</div>
<div class="itemrow">
<div class="item1">7</div>
<div class="item2">8</div>
</div>
<div class="itemrow">
<div class="item1">9</div>
</div>
</div>
CSS -
#container
{
width: 400px;
}
.itemrow
{
float: left;
clear: both;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 190px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
Edit: Just read your above comment about having to edit the server side logic for rendering. Obviously this will only work if you can control that.
you're specifying item2 to be 10 pixels wider than item1 so I'm not clear on what you're trying to do....