This is an excerpt from a much more complex problem, but the issue comes down to this: the code works on FF43, but not on IE11. After two days, I have determined that you can get the FF output to look like the IE output by reducing the width of the outer wrapper. I've tried variants on position, float, display, etc., all to no avail.
The goal was, as the content grows, to get the content div to resize horizontally first (expanding all the wrappers), and then to resize the content div vertically when the outer width limits are reached. Any ideas?
<!DOCTYPE html>
<style>
.wrapper { xwidth:480px; border:1px solid violet; }
.formbox { display: inline-block; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; background: #FFFFFF; border:1px solid black; }
.row { display: block; border: 1px solid #ccc; margin:3px; padding:4px; clear:both; position:relative; }
.label { float:left; display:inline-block; width:120px; text-align:right; padding-right:4px; border:1px solid red; }
.icons { float:right; width:40px; border:1px solid red; text-align:center; }
.input { display:inline-block; border: 1px solid green; }
</style>
<div class="wrapper">
<div class="formbox">
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
</div>
</div>
fiddle: https://jsfiddle.net/des2016/r7x6d2tw/
Related
Please see the below snippet.
.frame {
height:10em;
padding:2px;
border:solid 1px black
}
.title {
height:2em;
overflow-y:scroll;
border:solid 1px green
}
.body {
height:100%; //??
overflow-y:scroll;
border:solid 1px red
}
.footer {
border:solid 1px blue
}
<div class="frame">
<div class="title">
headline
</div>
<div class="body">
<p>... body ... </p>
</div>
<div class="footer">
<textarea style="height:2em;width:95%"></textarea>
</div>
<div>
Is it possible to make the red (.body) div fill up the gap between the green (.title) and blue (.footer) divs and have all three to fit perfectly in the black frame without computing heights in a script?
It's trivial in flexbox -- use specific heights on elements where you want that, and flex-grow:1 on the element that should fill the remaining space.
.frame {
height:10em;
padding:2px;
border:solid 1px black;
display:flex;
flex-direction: column
}
.title {
height:2em;
border:solid 1px green
}
.body {
overflow-y:scroll;
border:solid 1px red;
flex-grow: 1
}
.footer {
border:solid 1px blue
}
<div class="frame">
<div class="title">
headline
</div>
<div class="body">
<p>... body ... </p>
</div>
<div class="footer">
<textarea style="height:2em;width:95%"></textarea>
</div>
<div>
If you need to support pre-flexbox browsers -- which means older IE, pretty much -- it's decidedly less trivial. Off the top of my head I'm not sure it's possible. I would take it as an opportunity to practice the phrase "degrades gracefully."
I'm having trouble in aligning divs in my project. I'm expecting something like this:
but what i've done so far is like this one:
All divs have class "inline"
CSS:
div.inline{
float: left;
}
Thanks in advance.
why not something like this?
just a little adjustment to deepus code: though the width of the parent and children must be set to your standards
<html>
<head>
</head>
<style>
.inline
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
float:left;
margin:2px;
}
.main
{
width:120px;
}
</style>
</head>
<body >
<div class="main">
<div class="inline">div 1</div>
<div class="inline">div 2</div>
<div class="inline">div 3</div>
<div class="inline">div 4</div>
</div>
</body>
</html>
Simple:
div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 4px;
}
div:nth-child(odd) {
clear: left;
}
See this fiddle: http://jsfiddle.net/QkruA/
go to old school way...clear:both
demo
css
div.inline{
float: left;
width:200px;
height:200px;
border:1px solid #000;
}
.clr{
clear:both;
}
html
<div class="inline"></div>
<div class="inline"></div>
<div class="clr"></div> <!-- taa daa...i love old schools methods :) -->
<div class="inline"></div>
<div class="inline"></div>
why don't you just use display:inline-block on each div
To make it easy for you for in the future add a class "left" and "right"
In this way you only have to make 2 very little css codes and you can use it every time you want something to set left or right (so you dont need to type this again every time you want to use it)
CSS code
.left
{
float:left;
}
.right
{
float:right;
}
.box
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
margin:2px;
}
.main
{
width:120px;
}
HTML code
<body >
<div class="main">
<div class="left box">div 1</div>
<div class="right box">div 2</div>
<div class="left box">div 3</div>
<div class="right box">div 4</div>
</div>
</body>
I have a html structure like this:
<div class="content">
<div class="icon"></div>
<div class="text">Some long message text which is wrapped in two lines.</div>
<div style="clear:both"></div>
</div>
and corresponding css:
.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon}
.icon, .text {float:left}
I want to align icon and text componenent in one line without using any relative and absolute width value.
Here is a fiddle - http://jsfiddle.net/7kNSs/
Remove CSS float property form .text
Try Fiddle
HTML :
<div class="content">
<div class="icon"></div>
<div class="text">Some long message text which is wrapped in two lines.</div>
<div style="clear:both"></div>
</div>
CSS :
.content
{
width:300px; margin:30px auto; border:1px solid #000;
}
.icon
{
width:40px; height:40px; background-color:maroon; float:left;
}
All you gotta do is take out the .text div:
<div class="content">
<div class="icon"></div>
Some long message text which is wrapped in two lines.
Some long message text which is wrapped in two lines.
Some long message text which is wrapped in two lines.
Some long message text which is wrapped in two lines.
<div style="clear:both"></div>
</div>
.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon}
.icon, .text {float:left}
Check the forked fiddle: http://jsfiddle.net/Milanzor/tfrH6/
remove float form text class
html
<div class="content">
<div class="icon"></div>
<div class="text">Some long message text which is wrapped in two lines.</div>
<div style="clear:both"></div>
</div>
css
.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon;float:left;}
Try to change this line .content {width:300px; margin:30px auto; border:1px solid #000}
by this
#content { overflow: hidden;width:300px; margin:30px auto; border:1px solid #000}
I want to make news system, on left side i want to get news from world, on right i wont to get news from my country. I really don't know how to solve this problem:http://i48.tinypic.com/15rxzkw.jpg
source:
<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/> <br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
</div>
I note that i cannot have main div on left and main div on right column/side.
Two br tags make something like 100% width block and prevent floats to stack horizontally.
You can avoid this problem by making the columns first and then place news blocks inside http://jsfiddle.net/yHWmv/
Don't forget to clear floats with wrapper with overflow:hidden or other clearfix.
html:
<div class="news">
<div class="news-world">
<div></div>
...
</div>
<div class="news-local">
<div></div>
...
</div>
</div>
css:
.news {
overflow:hidden;
}
.news-world {
float:left;
width:30%;
}
.news-local {
float:right;
width:30%;
}
.news-world div,
.news-local div {
border:1px solid red;
padding:10px;
}
Firstly, you can move all your styles to a CSS file.
What you want is to have the topmost div, with width say X, and position: absolute.
Then for the child left div, you have position:relative and right:50%;left:0
Then for the child right div, you have position:relative and right:0;left;50%;
Wrap all left divs in a <div class="left">. Wrap all right divs in a <div class="right">.
Ant then:
You can also add `display: inline' to each div (it's better to use a css file):
style:
.mainbox {
width: 1000px;
}
.mainbox div {
width:400px;
display: inline;
}
.leftbox {
float: left;
border:1px solid red;
}
.rightbox {
float: right;
border:1px solid blue;
}
.clearbox {
clear: both;
height: 0;
border: 0;
}
html:
<div class="mainbox">
<div class="leftbox">news from world</div>
<div class="rightbox">news from my country</div>
<div class="clearbox"> </div>
<div class="leftbox">news from world</div>
<div class="rightbox">news from my country</div>
<div class="clearbox"> </div>
...
</div>
I have a div that contains inside 3 'floated' divs. The containing div has a line of text. The three floating inner divs also have a line of text.
When I specify text-align center for the outermost containing div, the three nested divs appear first, on one row next to each other left-to-right, and THEN the containing div's text appears to the right of the contained divs, centered in the space to the right of them.
Instead, I don't understand why the outermost containing div's text will not appear centered in the browser window, then below that the 3 contained divs and their text would appear. That's what I need to happen.
Here is the code. By the way I tried to embed a .jpg image into this question so you can see the problem -- anyone know how to display a screenshot or .jpg into a question here?
<head>
<style>
#myRowStyles
{
text-align:center;
margin-bottom:100px;
background-color:#b0e0e6;
border: 1px solid red;
}
#leftSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#centerPiece
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#rightSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
</style>
</head>
<div id="myRowStyles"><b>THIS IS THE TOP OF THE ROW</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div style="clear:both">
</div>
<div id="myRowStyles"><b>THIS IS ROW #2</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
First you have multiple same ID's on the page. That's bad. Change them to classes.
Second give myRowStyles a width.
I think that to make divs behave like tables you must define the display attributes in CSS:
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
So you will also need to add an extra <div> at the beginning for the container. I haven't tested this.
Also, I dont think you can make a single row span 3 columns when using DIVs so you must do something like this:
<head>
<style>
#container {
width:90%;
float:center;
margin-left:10px;
margin-top:30px;
border: 1px solid blue;
text-align:centre;
display: table;
}
#myRowStyles
{
text-align:center;
background-color:#b0e0e6;
border: 1px solid red;
display: table-row;
}
#leftSide,#centerPiece,#rightSide
{
width:120px;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
display: table-cell;
}
</style>
</head>
<div id="container">
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 1
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 2
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
</div>
Try something like this: http://jsfiddle.net/We74E/2/