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.
Related
How would you position elements in a relatively positioned div, and keep them the same distance apart without going out side of the box? I have a relatively positioned div and inside of it is a div(nameTabs) that spans 100% of the width. Inside of that div is taskstabtext, and tasksaddbox. Tasks tab text is positioned where it is and stays there. Button does not. What would be the cleanest way of positioning the two in a flexbox responsive div? Thanks
<html>
<body>
<div id="box" style="display inline:block; position:relative; left:10%; background-color:red;">
<div>
<div class="nameTabs tasksTab">
<div class="tasksTabText">
<p class="tasksBtnText">Name</p>
</div>
<div class="tasksAddBox">
<p class="tasksAddBtn">Last</p>
</div>
</div>
</div>
</div>
</body>
</html>
LINK - https://jsfiddle.net/9rqd9ot9/15/
I figured it out. For anyone with a similar issue, just use the justify-content:space-between;rule. It seperates the two and then you can set their margins from the edge.
LINK- https://jsfiddle.net/9rqd9ot9/38/
I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.
I have the following split among 3 main div to be side by side. The very left div I want it to take up 60% of the screen and the rest 2 (description and resource) to take each 20%. When I run this all 3 are overlapping on the left portion. Below is my codes.
<div id="left" style="position:absolute;top:0px;left:0px;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="position:absolute;top:0px;left:0px;width:60%;height:400px">Map goes here.</div>
<div id="details" style="position:absolute;top:400px;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
They are overlapping because you've given them all absolute position and left 0. Absolute position removes the element from the normal flow of the page and puts it exactly where you indicate using the top/left/right/bottom properties. They will overlap as long as they have the same parent and same position properties.
Absolute position and left being 0 is making them overlap.
Please use css
see solution : http://jsfiddle.net/thecbuilder/vZ77e/
html
<div id="left">
<div id="map">Map goes here.</div>
<div id="details">Details</div>
</div>
<div id="description">description</div>
<div id="resource">resource</div>
css
#left, #description, #resource{
display:inline;
float:left;
height:100%;
}
#left{
width:60%;
background:#e6e6e6;
}
#description, #resource{
width:20%;
}
They are overlapping because you are using position absolute. instead place the divs at the top of the html page and do this instead:
<div id="left" style="float:left;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="float:left;width:60%;height:400px">Map goes here.</div>
<div id="details" style="float:left;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
This will place the divs beside each other
I have this html
<div class="portlet-header" style="width: 447px">
<h3>Total Calls Statuses</h3>
</div>
<div id="vertical-chart-total-calls-statuses" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
<div class="portlet" style="background-color:green; float:right; ">
<div class="portlet-header" style="width: 447px">
<h3>Inbound</h3>
</div>
<div id="vertical-chart" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
I don't have any CSS, but I do have HTML. Here is the current result of my code:
http://i.stack.imgur.com/mFEO3.png
I need the green div to be side by side with the red one, how do I do this?
Here’s a JSFiddle:
http://jsfiddle.net/Tn58S/
Put all the content within a container DIV with a width sufficient to hold both portlet DIVs, i.e. with a width of 956px as each of your portlet DIVS contains a CANVAS with a width of 478px. So:
<div style="width: 956px"><!-- your content here --></div>
See this jsfiddle example
After checking the full code provided in your jsfiddle, I recommend the following changes:
chartsclass needs to be wide enough to contain its content, which is 958px. So add a max-width of 958px to this class.
As you have also set chartsclass to a width of 80%, this means that the width of contentArea, which contains chartsclass and informationClass, needs to be a minimum of 1198px, as 958 is 80% of 1198.
As informationClass is set to 20%, it needs to be set to a maximum width of 240px.
As the logoArea needs to be a width of 100%, remove the float: left so that it remains as a block level element.
I've updated your jsfiddle
Just change
<div class="portlet" style="background-color:green; float:right; ">
to
<div class="portlet" style="background-color:green; float:left; ">
and make sure to resize the window to make room for both divs.
Set the widths of the main divs to be 50%
http://jsfiddle.net/yaHwj/
width:50%
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>