Issue displaying div's side by side - html

I am trying to create a scrollable div which should show 3 div's side by side.
Below is my html code, Issue with below code is it is not showing 3 div's side by side instead it is displaying one after other.
<div id="myDIV2" class="mygrid-wrapper-div">
<h1>This is scrollable div </h1>
<div class="row row-list">
<div class="col-xs-4">
<div>
Test1
</div></div>
<div class="col-xs-4">Test2</div>
<div class="col-xs-4">
<div>
Test3
</div></div>
</div></div>
css code:
<style>
.mygrid-wrapper-div {
/*border: solid red 5px;*/
overflow: scroll;
height: 40%;
}
</style>

A div is a "block-level" element. Block-level elements are 100% of the width of their parent element and displayed on their own line by default.
There are several ways to override this layout:
Set float for the element, which reduces it's width to the width of the content and allows other elements to be on the same line with the floated element.
Set the width to an amount that leaves left over space for another element to fit on the same line and set the element to be display:inline or display:inline-block.
Take the element out of the normal document flow by setting its position property to absolute, relative or fixed.
Make the elements flexitems within a flex container.
.mygrid-wrapper-div {
overflow: scroll;
height: 40%;
}
.col-xs-4 {
border: 1px solid red;
float:left;
}
<div id="myDIV2" class="mygrid-wrapper-div">
<h1>This is scrollable div </h1>
<div class="row row-list">
<div class="col-xs-4">
<div ng-controller="myController">
<div ng-repeat="c in chart">
<div google-chart chart="c">test</div>
</div></div></div>
<div class="col-xs-4">22222222 </div>
<div class="col-xs-4"> <div ng-controller="myController">
<div ng-repeat="c1 in chart">
<div google-chart chart="c1">test</div>
</div></div></div>
</div></div>

Add the css style:
float:left;
to your divs.

Your plnkr.co example was not loading bootstrap, which is why you were not seeing your divs aligned as expected. Made the following changes to make it work:
Removed:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Added:
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
Check https://plnkr.co/edit/r6a7lJpNNG2UI1qDbcb6?p=preview

Related

Placing a div inside bootstrap column pushes content to new line

I'm having a text message wrapped in bootstrap column div and i'm trying to customize specific text in that column by wrapping it with another div but bootstrap pushes that text to a new line.
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<div>Text3</div></div>
</div>
</div>
https://jsfiddle.net/e642tsb1/
Its because div has a default property of display: block; which makes the div appear in a new line. Use the bootstrap class d-inline-block to set its display: inline-block;
It will then appear in the same line.
.row {
background: white;
margin-top: 20px;
}
.col {
border: solid 1px red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2
<div class="d-inline-block">Text3</div>
</div>
</div>
</div>
Change your interior div to a span and it will appear on the same line:
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2 <span>Text3</span></div>
</div>
</div>
A div is a block level element by default, meaning its content will take the entire width of the page, so any child div will do the same. Here is your updated fiddle:
https://jsfiddle.net/2huy04kc/
That's true it will happen.
<div> Text2 </div> will push your <div> Text3 </div> to the next line as div are block elements.
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
Better you use <span></span> or give a display: inline-block; property to the inner div containing Text3.
Learn different types of display in CSS here.
The div element is a block-level element. A block-level element always starts on a new line and takes up the full width available. You can use span element as an inline element. An inline element does not start on a new line and only takes up as much width as necessary.
Solution 1 : Replace div element with span element
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<span>Text3</span></div>
</div>
</div>
Solution 2 : Styling div element to display as an inline element (not recommended).
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<div style="display:inline">Text3</div></div>
</div>
</div>

Overriding Bootstrap 3 CSS styles

I have this style:
.form-style{
margin: 50px auto;/* also tried margin: 50px auto !important; */
/* other styles */
}
And I use it in my div element like this:
<div class="row">
<div id="myDiv" class="form-style col-md-6 col-md-offset-3">
<p>This is a text.</p>
</div>
</div>
If I don't use form-style my div is appear at the center. But I want to use form-style and when I use it, the margin property of the form-style will prevent the bootstrap col-md-offset-3 to make my div center. How can I override the parent margin so that it haven't been set for my div?
If I remove the margin from form-style it works fine. But I can't remove the margin since it is used in other parts of my project.
Not sure why you want something like this as it seems a hack but your issue is that your element is floating that's why the margin auto is not working, so you need to remove the floating to make it working. (but it's not a good idea as it will make bootstrap behave strange)
.form-style {
margin: 50px auto!important;
float: none!important;
/* other styles */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class=container>
<div class="row">
<div id="myDiv" class="form-style col-xs-6 col-xs-offset-3">
<p>This is a text.</p>
</div>
</div>
</div>
From your question is seems that you don't want to replace the offset value of left to right, but want the margin set to the top and bottom. If this is the case this will work without any override of Bootstrap values. Also, adding the div id will not affect any other places that form-style is used.
#myDiv.form-style {
margin-top: 50px;
margin-bottom: 50px;
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div id="myDiv" class="form-style col-md-6 offset-md-3">
<p>This is a text.</p>
</div>
</div>

what is the use of this div tag with only clear rule [duplicate]

This question already has answers here:
What is the use of style="clear:both"?
(3 answers)
Closed 8 years ago.
I was noticing that <div style="clear:both;"></div> had been frequently used in a website between div areas. Given the fact that no other rules such as width and height has been specified for this, what is the effect of this type of usage? an example of the site code follows below
<div id="content">
<div id="middle-cont"></div>
<div id="bot-r">
<div style="clear:both;"></div>
<div class="hwd-module latest-audio"></div>
<div style="clear:both;"></div>
</div>
</div>
<style>
#middle-cont {
padding: 18px 0px;
margin-top: 20px;
margin-right: -40px;
margin-left: -40px;
}
#bot-r, #bot-c, #bot-l {
width: 32%;
height: auto;
float: right;
padding: 5px;
}
</style>
Clear:both
is used to clear any (or for that matter, all preceding) floats.
It basically means "No floating elements allowed on either the left or the right side".
Let us try to understand this with a demonstration :
You can see a couple of examples below:
No clear -> http://jsfiddle.net/0xthns3k/
The html and css are as follows :
HTML :
<div class="left">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
CSS :
div {
display:inline-block;
width: 150px;
height:150px;
}
.left {
background-color:Orange;
float:left;
}
.right {
background-color:Red;
float:right;
}
.Green {
background-color:Green;
}
.yellow {
background-color:yellow;
width:30px;
}
This is the image of the generated HTML.
If you see here, the green colored box is placed somewhat in the center of the two floated elements. Well, actually since there are floated elements the new "non-floated" element is actually placed adjacent to the leftmost floated element. Hence, you see the green colored element just adjacent to the leftmost floated element.
Now, if you were to have another element(s) floated left, this would automatically fit between the Orange and the Green elements.
See this below :
http://jsfiddle.net/0xthns3k/1/
Also, the position of this 'new' left floated element wouldn't be that important too with respect to the said HTML.
Placed below green element
<div class="left">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
<div class="left yellow">
</div>
Placed after right floated element.
<div class="left">
</div>
<div class="right">
</div>
<div class="left yellow">
</div>
<!-- No clear -->
<div class="Green"></div>
Placed after left floated element
<div class="left">
</div>
<div class="left yellow">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
All the above HTML code would generated the same HTML as shown in the image above.
With clear -> http://jsfiddle.net/bk3p160d/
The HTML is only slightly modified here :
HTML
<div class="left">
</div>
<div class="right">
</div>
<div class="clearAll"></div>
<div class="Green"></div>
and one additional CSS class :
CSS
.clearAll {
clear:both;
}
If you see here, the green colored element is positioned below the line containing the aforementioned floats. This is because "clear: both" tells the HTML rendering engine
"No floating elements allowed on either the left or the right side". Hence, it cannot place this element on the same line as it would violate the defination. This causes the engine to place it on a new line. On the line the preceding float properties are essentially nullified. Hence, clear:both is used to effectively clear any preceding floats.
See here for further information : http://www.w3schools.com/cssref/pr_class_clear.asp
Hope this helps!!!

div align center then left without using width

I have div's inside a div
<div id="out" align="center">
<div id="in1" align="left">111</div>
<div id="in2" align="left">aaaaaaaaaaaaaaaaaaaaaa</div>
<div id="in3" align="left">bbbb</div>
<div id="in4" align="left">6516519191</div>
<div id="in5" align="left">apple</div>
<div id="in6" align="left">ii</div>
</div>
The expected result is a div with size=(max inside div size) which is centered. Then items inside it are all aligned left:
111
aaaaaaaaaaaaaaaaaaaaaa
bbbb
6516519191
apple
ii
I don't want to give width to the outer div since I have no idea about size of the items from before.
is there any way?
You can by inserting another (outer) container div.
Outer div container: width 100% and centered text alignment;
Inner div container: inline-block and left text alignment
CSS
#outerContainer {
width: 100%;
text-align: center;
}
#innerContainer {
display: inline-block;
text-align: left;
}
HTML
<div id="outerContainer">
<div id="innerContainer">
<div id="in1">111</div>
<div id="in2">aaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</div>
Running Demo: http://jsfiddle.net/nvMmx/
First, there is no "align" attribute for div's.
The information you are providing looks like tabular data. In that case, a table should be used, not div's.
Set the outer width:100%;
Or define the inner width otherwise
CSS
.abc{
float:left;
width:100%;
}
HTML
<div id="out" align="center">
<div id="in1" class="abc">111</div>
<div id="in2" class="abc">aaaaaaaaaaaaaaaaaaaaaa</div>
<div id="in3" class="abc">bbbb</div>
<div id="in4" class="abc">6516519191</div>
<div id="in5" class="abc">apple</div>
<div id="in6" class="abc">ii</div>
</div>

Background color for div with child divs

<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.