I need to have the below two div to be remain in the same line(like tables) even after resizing the window to minimum size.
<div id="wrapper" style="">
<div id="div1" style="display:inline-block;">
<p>this is div one. this should remain in same line with div 2 even after resizing the window.</p>
</div>
<div id="div2" style="display:inline-block">
<p>this is div two. this should remain in same line with div 1 even after resizing the window.</p>
</div>
</div>
Use display:flex to wrapper, and it will do the job
<div id="wrapper" style="display:flex">
<div id="div1">
<p>this is div one. this should remain in same line with div 2 even after resizing the window.</p>
</div>
<div id="div2">
<p>this is div two. this should remain in same line with div 1 even after resizing the window.</p>
</div>
</div>
With the current setup just add width to you div's. That will get the div's next to each other.
<div id="wrapper">
<div id="div1" style="width:50%; display:inline-block;">
<p>this is div one. this should remain in same line with div 2 even after resizing the window.</p>
</div>
<div id="div2" style="width:50%; display:inline-block">
<p>this is div two. this should remain in same line with div 1 even after resizing the window.</p>
</div>
</div>
It would be preferable to use CSS classes instead of inline CSS.
Also there is CSS flexbox that you can use.
Related
I am trying to fit image in with text link to flexbox container. The problem that it's break my container and it's become look like next on small screen:
<el-container>
<el-main>
<div class="top">
<div class="download-compiler">
<div class="dmd-download">
<el-image src="http://dlang.ru/imgs/dmd_logo_128.png"></el-image>
<el-link style="color: black; font-size: 1.3em;">DMD</el-link>
</div>
</div>
<div class="code-snippets">
<div class="code-snippets-header">
Samples:
</div>
<div class="code-snippets-content"></div>
</div>
</div>
<div class="middle">
<div class="main-app-img">
</div>
</div>
</el-main>
</el-container>
Here is minimal jsfiddle.
https://jsfiddle.net/dhoc4zw5/
I'm not really sure what you're trying to achieve, but in your jsfiddle, just removing height: 20% from class .top make the image and text always stay in the pink zone.
I have three column layout. In the third column I have two divs. First div is fixed. Second div is having minimum height of 50px. when the text content inside second div increases then its height should increase to a point where it reaches the bottom of third column and then it should show scrollbars.
So far I have applied my effort here:http://jsfiddle.net/Q2Ata/1/
I have tried to achieve this layout but when I add more text inside then the main table's height also inceases. This issue can be found in this fiddle.
http://jsfiddle.net/Q2Ata/2/
HTML code:
<div class="table">
<div class="table-cell">
<div class="column">Column 1</div>
</div>
<div class="table-cell">
<div class="column">Column 2</div>
</div>
<div class="table-cell">
<div class="column">
<div class="container">
<div class="header">
<div class="table-cell">Header</div>
</div>
<div class="content">
<div class="abc">
text content here ...
</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
.table {display:table;width:100%;height:200px;max-height:200px;table-layout:fixed}
.table-cell{display:table-cell;padding:10px;vertical-align:top}
.column{border:1px solid #000;height:100%}
.container{display:table;width:100%}
.header, .content{display:table-row}
{display:table-row}
.container .table-cell{border:1px solid #F00}
.abc{min-height:50px;padding:10px;border:1px solid #000;height:auto;overflow-y:auto}
You need to set a max-height on your element in order to have the overflow: auto working and you will have scroll bars when the maximum height has been reached.
http://jsfiddle.net/Q2Ata/4/
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>
Is it possible to do this with CSS? Given the following HTML:
<div class="main-container">
<div class="left">
...
</div>
<div class="right">
<div class="top">
...
</div>
<div class="bottom">
dynamic content
</div>
</div>
</div>
I want bottom to scroll if it overflows the space between top and the bottom of main-container.
How can this be done without specifying the height of bottom?
I would prefer not to specify height on other elements either if possible. It doesn't right now, but top could have dynamic content as well.
The HTML above can change however necessary; what I require is the end result of a left column, a right column, and the bottom portion of the right column scrolling if its context exceeds the available space in the main container.
In the end, you'll have to specify some kind of limits (either height or max-height) to your elements in order to know if the content goes beyond them.
Once you have those dimensions set up, overflow:auto; will show you scrollbars when you need them.
Hope this is what you are looking for:
<div class="main-container">
<div class="left" style="float: left; width:33%">
...
</div>
<div class="right" style="float: right; width:66%">
<div class="top" style="height: auto;">
...
</div>
<div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
dynamic content
</div>
</div>
</div>
Is it possible to use a fixed width div and an expanding div? Something like:
<div style="float:left; width:200px">
</div>
<div style="float:left; width:100%"> // expand please
</div>
<div style="position:fixed; width:320px">
</div>
I'd like the middle div to just expand in width and take up whatever is left after position the left and right div. It works fine if I give each of them a width in %, but when using a fixed-width for some, they start overlapping when the browser frame gets small etc,
Thanks
How about:
<html>
<body>
<div style="float:left;width:200px;background:red">
</div>
<div style="float:right; width:320px;background:blue">
</div>
<div style="background:black">
</div>
</body>
</html>
<div style="left:0;width:30px;"></div>
<div style="left:30px;right:0;"></div>
You may need to make them absolute positioned and the parent relative.