I'm experiencing the perennial problem of getting two columns with content of an uneven height to fill their parent container and be the same length independent of their content which will vary. I'm aware of some of the hacks for this such as using a vertically tiled background image on the parent object to simulate the columns but I also want rounded corners on the columns as well as them being different colours.
The height of the parent object is dictated by the height of the tallest 'child' column which is fine but the vertically smaller column's background shrinks to the size of its content making its background shorter than the background container. In this example I've coloured the usually invisible background object black for visibility and want the larger blue column on the left to fill this area vertically. In the case of the Blue column being taller, I want the inverse to happen and the yellow column to fill the black parent object.
I've simplified the layout to its simplest form to demonstrate the problem and the code and an image follow.
CSS:
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: rgb(0,50,130);
position: relative;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: left;
margin: 0px;
border: none;
padding: 0px;
}
/*auto-centering outer container box*/
.outer {
margin: 0px auto;
width: 960px;
text-align: center;
position: relative;
}
.top {
width: 960px;
height: 150px;
background-color: rgb(255,0,0);
border-radius: 6px;
}
.mid {
width: 960px;
float: left;
height: 100%;
margin-top: 35px;
background-color: rgb(0,0,0);
}
.midmain {
width: 710px;
height: 100%;
background-color: rgb(0,0,255);
float: left;
border-radius: 10px;
padding: 20px 20px 30px 20px;
margin-right: 6px;
}
.midside {
width: 180px;
height: 100%;
background-color: rgb(255,225,0);
float:right;
border-radius: 6px;
padding: 10px 10px 10px 10px;
}
/*Text rules for midside*/
.nav {
width: 180px;
}
.nav a, nav a:link{
display: block;
width: 178px;
height: 28px;
background-color: blue;
border: 1px solid rgb(0,20,100);
padding: 10px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 10px;
border-radius: 6px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
color: white;
text-decoration: none;
}
.nav a:hover {
color: black;
background-color: white;
border: 1px solid rgb(128,0,0);
margin-top: -2px;
margin-bottom: 12px;
}
.bot {
width: 960px;
height: 100px;
float: left;
background-color: rgba(255,255,0,0.5);
margin-top: 10px;
margin-bottom: 20px;
border-radius: 6px;
box-shadow: 2px 2px 3px 3px rgba(0,20,60,0.3);
}
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Columns</title>
<link href="styles/col.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="outer">
<div class="top">
</div>
<div class="mid">
<div class="midmain">
Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
</div>
<div class="midside">
<div class="nav">
Home
News
Contact
About
Staff
Gallery
Video
Links
</div>
</div>
</div>
</div>
</body>
</html>
Any advice or help would be greatly appreciated!
Thanks,
Kw
Change the following definitions in your css:
.mid {
width: 960px;
float: left;
margin-top: 35px;
background-color: rgb(0,0,0);
position:relative;
}
.midmain {
position:absolute;
width: 710px;
min-height: calc(100% - 50px);
background-color: rgb(0,0,255);
border-radius: 10px;
padding: 20px 20px 30px 20px;
margin-right: 6px;
}
.midside {
width: 180px;
float:right;
background-color: rgb(255,225,0);
border-radius: 6px;
padding: 10px 10px 10px 10px;
}
With absolute positioning, the child element's height is defined relative to its parent.
If you're not keen on the min-height: calc(100% - 50px);style, you can use the following in its place. It will have the same effect:
top:0;
bottom:0;
I run into this situation as well sometimes. Basically run this against the elements that you wish to find the tallest (height), and apply that css to the other element(s).
Please note that you need (and should always) apply box-sizing:border-box; to all your elements, (ie - * { box-sizing:border-box;}
Fiddle for you
var heights = $(".mid > div").map(function ()
{
return $(this).outerHeight();
}).get(),
maxHeight = Math.max.apply(null, heights);
console.log(maxHeight);
$('.mid > div').css('height',maxHeight);
Also note that you should remove the height from your (2) div elements (since it's going to be overridden. Keep in mind as well that you "may" want to put this function in a $(window).resize() if you're doing responsive (which you should also), and you have media queries that change padding, etc.
Related
my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing
here is css:
.card_main {
border: 1px solid black;
margin-top: 30px;
border-radius: 5px;
height: 900px;
background: #ffffff;
width: 100%;
}
.blog_content__text {
width: 95%;
height: 320px;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
.blog_heading {
font-size: 24px;
color: black;
}
.blog_details {
font-size: 16px;
color: black;
opacity: 0.7;
margin-top: 20px;
}
my html
<div className="card_main">
<div className="blog_content__text">
<h1 className="blog_heading">{data.blog_title}</h1>
<p className="blog_details">{data.blog_body}</p>
</div>
<div/>
how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css
When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;
If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.
.blog_content__text {
width: 95%;
height: 320px;
overflow-y:auto;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
remove the height: 320px;
if you must, use it as min-height: 320px;
try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.
You can also make use of the following property if you really want to set the height:
height: min-content;
I am working on a project that has popup boxes for the user to interact with. I am trying to put 2 blocks of content next to each other in the popup box.
I've been looking around for answers, but none of the common solutions seem to be working here. I've tried float:left, display: inline-block, etc. The only thing that has worked is to set the exact width/heights and apply a margin to the second container, but I'd like to avoid this hack-y solution.
HTML:
<div id="equip-robot-modal" class="modal">
<div id="equip-robot-modal-content" class="modal-content">
<div id="equip-modal-content-inner" class="modal-content-inner">
<div id="robot-info-content">
<header id="equip-header">
<h2 id="equip-header-text">Robot Name Header</h2>
</header>
</div><!-- #robot-info-content -->
<div id="inventory-list-content">
<div id="inventory-list-container">
<p>
put more content here
</p>
</div><!-- #inventory-list-container -->
<div id="auto-match-container">
<button type="button" style="width: 50%; height: 50px; margin-top: 20px;" class="button">
<?php //echo langMatch(
//'PLAYER_SELECTOR_AUTO_MATCH'); ?>
Go to Store
</button>
</div><!-- #auto-match-container -->
</div><!-- #inventory-list-content -->
</div><!-- #equip-modal-content-inner -->
</div><!-- #equip-robot-modal-content -->
CSS:
#robot-info-content {
min-width: 500px;
padding: 10px;
position: relative;
float: left;
background-color: red;
}
#robot-image {
padding: 20px 0;
}
#modal-progress-bars {
min-height: 75%;
}
#inventory-list-content {
min-width: 400px;
padding: 10px;
display: inline-block;
float: left;
background-color: purple;
}
#inventory-list-container {
width: 100%;
height: 430px;
border: 1px solid black;
overflow-y: scroll;
}
.modal-content {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 350px;
height: auto;
transform: translate(-50%, -50%);
background-color: #f7f7f7;
color: black;
border: 2px solid black;
overflow: visible;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
padding: 10px 50px;
margin: 0 auto;
}
See the fiddle: https://jsfiddle.net/kqa25wgv/
I'd like to float the 2 content divs within the modal-content inner div. Any suggestions?
Here are some values that worked for me. I stripped out all the superfluous ones:
.modal-content {
width: 800px;}
#robot-info-content {
width: 50%;
float: left;
background-color: red;
}
#inventory-list-content {
width: 50%;
float: left;
background-color: purple;
}
#inventory-list-container {
height: 430px;
border: 1px solid black;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
}
You'll notice that I set the width of the .modal-content class to 800px. That's arbitrary and you can change it to what you want (or set it as a percentage of its containing div, if you have one). The important change is to replace your minimum-width settings with width settings, and set them to a percentage. The problem that you have is that your two inner divs are too wide for their container, so the second one wraps to the next line, so to speak.
Of course, if you use padding and/or margins on the inner content divs, you won't be able to set them at 50% without having the same problem.
The other thing that you'll want to experiment with is floating one content div to the left and the other to the right. If you float them both to the left, it won't make a difference so long as they take up the entire width of their container (and no more than the entire width). This can get tricky when you start using static values for your margins and padding, so you'll need to experiment. (You can also use percent values for margins and padding, which can be less tricky.)
I have a list of divs and each div contains sub divs each of which contain images. I have a problem wherein not all image are uniformly sized and hence the div containing the img tag expands depending on the image dimensions. I cant set the div height and width in terms of pixels, as it has work across mobile devices. Please let me know if there is a way to have fixed div size in terms of percentage irrespective of the image size.
CSS:
.listItem {
position: relative;
display: inline-block;
width: 80%;
border: 1px solid #eeeeee;
border-radius: 4px;
box-shadow: 0 1px 20px 0 #000;
margin: 1%;
background: #ffffff;
}
.programContent {
float: right;
right: 2%;
top: 0%;
margin-top: auto;
margin-bottom: auto;
padding: 1%;
border: 1px solid #737373;
border-radius: 2px;
background: rgba(190, 190, 190, 0.38);
width: 20%;
height: 90%;
position: relative;
}
.programContent img{
width: 100%;
max-height: 75%;
}
HTML:
<div class="listItem">
<div class="programContent">
<img src="imageURL">
</div>
</div>
<div class="listItem">
<div class="programContent">
<img src="imageURL">
</div>
</div>
Jsfiddle:
http://jsfiddle.net/fayazvf/owrk9cd2/2/
For the DIV that contains the image, define both height and width. see example below:
.div-that-contains-image {
width: 25%; /* Adjust as needed */
height: 25%; /* Adjust as needed */
overflow: hidden; /* cuts of whatever that goes beyond the given dimension */
}
For the image itself, either the width or the height, must be set to auto
to it doesn't deteriorate. see the example below.
.div-that-contains-image img {
width: 100%; /* Equals the .div-that-contains-image */
height: auto; /* Allows the image the breathing space so it doesn't deteriorate */
}
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
A layout has the following arrangement: (using MVC3 - The whole html is in the Layout.cshtml)
A Top header (containing a Banner and Menu bar)
Contents (Divided in Left and Right panes).
Footer
The contents of the Right pane contain tabs, and the height can vary depending on the opened tab.
I want to make the Contents div auto adjust to the height and not create a scrollbar (Not browser scroll bar).
This is somewhat achieved but it breaks the rest of the CSS.
Here is the CSS :
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
/* height: 100%; */
}
#Wrapper {
border: 1px solid #6A89C1;
height: 100%;
margin: 0px auto;
min-height: 750px;
min-width: 700px;
width: 100%;
font-size: 0.75em;
}
header {
background-color: #abcdef;
height: 19%; /* did not keep it 20% due to some Background repeat issues.. */
margin: 0px;
border-bottom: 2px outset #FFFFFF;
width: 100%;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#Banner {
height: 72%;
width: 100%;
padding-top: 5px;
}
#Menu {
height: 25%;
width: 100%;
}
#Contents {
height: auto; /*65%;*/
width: 100%;
clear: both;
}
#Contents #LeftPane {
background-color: #E9F1FF;
border-right: 1px solid #B9D4FF;
height: 100%;
min-height: 300px;
width: 24.8%; /* Should not be exactly 25% as it causes RightPane div to shift downwards */
}
#Contents #RightPane {
background-color: #FFFFFF;
height: 100%;
width: 75%;
overflow: auto;
}
.Left {
float: left;
}
.Clear {
clear: both;
}
footer {
background-color: #6A89C1;
clear: both;
height: 15%;
width: 100%;
margin: 0px;
min-height: 50px;
}
#Wrapper, footer {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
The whole center part needs to grow automatically but the Layout (propotions) should be same
Attached also is the image after adjusting to the given CSS
(notice the menu bar Bg and left pane & footer heights )
Hope to have explained the question adequately :)
I would avoid using heights all together, the browser will adjust element heights according to their contents.
You should get the opened tabs height with javascript (or jquery) and assign this height to the content container.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
overflow: auto
causes scroll bar.
You are able to do this using javascript (when tab is changed then change height depending on height of tab). I'm not sure if there is any other way.
Thanks for all the help.. !
found a possible solution of not putting all the contents in the wrapper div rather independent of each other i.e.
The Header div is separate div (parent is the body not the wrapper)
same for Contents and footer div..
Kind regards and again thank you for all the suggestions,
A.Ali