I need two divs next to each other so I had to put them in a wrapper. I want the outer div's height to be set by using the taller of the two div's wrapped inside. The height does seem to portray that quality when I use height:auto; for the outer div. However, the shorter of the two div's does not fill the entire height and it is not the same height as the other column. Does anybody know any CSS tricks to get this to work?
This CSS is as follows:
html, body {
background-color: #888888;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped {
width:95%;
border-style: solid;
border-width: 5px;
border-color: black;
overflow: hidden;
color:black;
margin:5px;
height: auto;
}
.post {
width: 50%;
float: left;
overflow:hidden;
}
.bully {
background-color: green;
width: 50%;
float:right;
overflow: hidden;
text-align: center;
}
The html is as follows:
![<html>
<head><link rel="stylesheet" type = "text/css" href = "style.css"></link></head>
<body>
<div class="wrapped">
<div class="post"> Q: WHAT'S GOING ON??? <br/> A: I HAVE NO IDEA!!! </div>
<div class="bully">55.55</div>
</div>
</body>
</html>]
Image
I have attached an image of one example of this. Because of the sensitive nature of the other examples, I can provide you with any others. Thanks in advance!
What you need is adding extra div to make it seems same height.
The HTML:
<div class="wrapped2">
<div class="wrapped1">
<div class="post">Q: WHAT'S GOING ON???
<br/>A: I HAVE NO IDEA!!!</div>
<div class="bully">55.55</div>
</div>
</div>
Add some css like this:
html, body {
background-color: #fff;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped2{
float:left;
width:100%;
background:green;
position:relative;
right:40%;
overflow:hidden;
position:relative;
}
.wrapped1 {
float:left;
width:100%;
background:red;
position:relative;
right:30%;
}
.post {
height:auto;
float: left;
overflow:hidden;
background:red;
position:relative;
left:70%;
}
.bully {
position:relative;
left:70%;
}
The point is position:relative.
And taraa...something like this will approaching.
Hope it will work for you.
Related
I have a post header div with height of 70px/4.375em
In it is a category h2 and a p timestamp
I want it to be aligned as demonstrated in this picture
(made in Photoshop)
Here is my HTML:
<div class="post-header" style="background-color:#9377d8">
<h2 class="category">Technology</h2>
<p class="timestamp">Saturday, today</p>
</div>
And my CSS:
.post-header{
height:4.375em;
width:25em;
margin-bottom:0;
float:left;
}
.category{
color:white;
display:inline;
float:left;
margin:0.625em;
}
.timestamp{
color:white;
display:inline;
float:right;
margin:0.625em;
}
Please help me with the CSS to get the design that I want
You can change your CSS as follows:
.post-header {
height:4.375em;
width:25em;
margin-bottom:0;
display:block;
}
.category {
color:white;
display:inline-block;
width:45%;
margin:0.625em;
}
.timestamp {
color:white;
display:inline-block;
text-align:right;
margin:0.625em;
width:40%;
}
This way, you get better control over your layout since you can specify both the width and the vertical align of the element. As we're at it, I'd use percentages for margins, but of course it goes on you
Visit fiddle to see it in action
You could try the following. Instead of floats, use inline-blocks with text-align: justify.
This only works if there at least two lines of text, so generate an extra blank line with the pseudo-element .post-header:after.
.post-header {
height: 4.375em;
width: 25em;
margin-bottom: 0;
float: left;
text-align: justify;
}
.category {
color: white;
margin: 0.625em;
display: inline-block;
}
.timestamp {
color: white;
margin: 0.625em;
display: inline-block;
text-align: right;
}
.post-header:after {
content: "";
display: inline-block;
width: 100%;
}
<div class="post-header" style="background-color:#9377d8">
<h2 class="category">Technology</h2>
<p class="timestamp">Saturday, today</p>
</div>
I want my div layout to have a minimum height. There's left panel and content. I can set up same min height for each div, but when there's more stuff in content than in leftpanel, content will be higher while leftpanel will stay at minimum height. I want them to be at equal height all the time. I've created a div container that has minimum height and inside it there are content and leftpanel with height set to 100%, but instead the layout is higher than screen, even with container min height as low as 200px.
Here is the code:
<html><head>
<title>mysite</title>
<style>
body {width: 900px; text-align: center; margin-left: auto; margin-right: auto; background-color:#66FFFF;}
div.container { min-height: 200px; }
div.logo { height:146px; width:100%; background-image: url("http://localhost/cms/images/header.png");}
div.links{ height:30px; width:100%; background-color: #0066CC; }
div.leftpanel { width: 25%; float:left; height:100%; background: #85FF5C; }
div.content { width: 75%; height:100%; float: left; background: white; }
a { text-decoration: none; font-weight: bold; color: #000080; }
a:hover { color: #FFA500; }
div.news { margin-left: 20px; margin-right:20px; padding: 25px; }
div.newstitle { text-align: center; color: #FFA500; font-weight: bold; }
div.newscontent { text-align: justify; margin-left:0px; font-size: 12px;}
</style>
</head>
<body>
<div class="logo"></div>
<div class="links">
HOME
</div>
<div class="container">
<div class="leftpanel">Stuff</div>
<div class="content">stuff</div>
</div>
</body>
</html>
This is an issue of equal heights for each column (divs). Look at this article http://css-tricks.com/fluid-width-equal-height-columns/ they explain multiple solutions for doing this. But it is not just straight forward, unfortunately :(
Update 1
Like they also write in the article, then css flexbox (stretch) is a good solution to solve this issue, http://css-tricks.com/snippets/css/a-guide-to-flexbox/, the only disadvantage is that is not supported in all browsers (http://caniuse.com/flexbox)
You need to add overflow property to div.content. This overflow property need to have value scroll
div.content { width: 75%; height:100%; float: left; background: white; overflow:scroll;}
In the following code the div content-container is not expanding in its height as increase in the height of the divs inside it. I want to make its height auto increment with the increase in height of inner divs
This id my css code
body{
margin:0;
padding:0;
line-height: 1.5em;
background:#f7f7f7;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #f0f0f0;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#content-container{
float:left;
width:100%;
background:#f8f8f8;
border:1px solid #f0f0f0;
margin-top:-22px;
margin-left:-1px;
height:auto;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-right: 310px; /*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
#rightcolumn{
float: left;
width: 310px; /*Width of right column*/
margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
background: none;
padding-top:20px;
margin-top:1px;
border-left:1px solid #222222;
}
#rightcolumn h2{
font:18px georgia;
font-weight:bold;
border-bottom:2px solid #222222;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
body{
margin:0;
padding:0;
line-height: 1.5em;
background:#f7f7f7;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #f0f0f0;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#content-container{
float:left;
width:100%;
background:#f8f8f8;
border:1px solid #f0f0f0;
margin-top:-22px;
margin-left:-1px;
height:auto;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-right: 310px; /*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
#rightcolumn{
float: left;
width: 310px; /*Width of right column*/
margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
background: none;
padding-top:20px;
margin-top:1px;
border-left:1px solid #222222;
}
#rightcolumn h2{
font:18px georgia;
font-weight:bold;
border-bottom:2px solid #222222;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
HTML code
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1></div>
</div>
<div id="content-container">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
content here
</div>
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
content here
</div>
</div>
</div>
<div id="footer">UIasdfg</div>
</div>
Demo
Your code seems to work fine, only minor tips to work it smoothly :
give body height:100%;
In the class innertube, use a paragrap to show the content, this way, u'll achieve a better flexibilty in showing big text paras.
use word-break: break-all for para
like this
<div class="innertube">
<p style="word-break: break-all;">
content here content here content here content here content here content here content here content here content here
</p>
</div>
and clear:both to clear all floats in the end :
</div> <!-- #content-container -->
<div style="clear:both"></div>
Ok, I think I figured it out. Using the same JsFiddle I created... I added a small tweak to only one of your CSS elements, which is below. We went from:
#contentcolumn {
margin-right: 310px;
/*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
and then all i added was a simple display which ended up being:
#contentcolumn {
margin-right: 310px;
/*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
display:inline;
}
This enables whatever is inside of that div to maintain being inside of that div. Here is the demo that provides a better example of what I am saying.
A few things to note, I did add in a background color so that you could effectively see what was changing, as well as I added a height, which doesn't need to be there.. again, I added that to show you what was happening with the innermost div.
One really awesome tool that can help you understand why this works is the Almanac, which will show you many tools to help you with any CSS needs. I do want to point out that #Mr.Alien's stack question is another resource that is well beyond the Almanac's explanation. Let me know if you need anything else :)
Can anyone take a look at this and let me know what I'm doing wrong (probably something stupid)?
I would like the Text "test" to be centered.
http://fiddle.jshell.net/uteaH/3/
CSS:
.wrap {
max-width: 1139px;
margin-left: auto;
margin-right: auto; }
#screenPresentation {
border-top: 4px solid #d95936;
margin-top: 50px;
margin-bottom:10px;
background: #fff;
}
#screenPresentation h2 {
margin-top: -45px;
color: #000;
font-size: 2.4em;
font-weight: 500;
float:left;
}
.loginContainer-wrapper {
width: 99%;
height: 500px;
border: 2px solid #000;
margin:0 auto;
}
HTML:
<div class="wrap" id="screenPresentation">
<h2>Title</h2>
<div class="loginContainer-wrapper">
test
</div>
</div>
text-align:center; by any chance?
I'm going to be a mindreader here since you won't tell us exactly what needs to be centered
DEMO
For #screenPresentation h2
Remove
float:left;
Replace with
position: absolute;
width: 95%;
text-align: center;
Sorry - I updated my question. I need the text "test" centered inside the inner div.
Oh in that case
Remove width:95%;text-align:center from #screenPresentation h2
Add text-align:center to .loginContainer-wrapper
DEMO
To center the text you need two steps:
First reset margin and padding for your tags:
* {
margin:0;
padding:0;
}
Second add text-align:
.wrap {
text-align:center;
}
The demo http://fiddle.jshell.net/uteaH/9/
you can use
<center>
test
</center>
that will do it.
I am not that bad at this, but somehow i am not able to center the contents of the page.
Also, the logo and tbar-right divs are not aligning properly (I'd like them to be arranged in a single line).
This is my markup:
<body>
<div class = "container">
<div id="topbar" >
<div class="logo">
<img src="images/rg-logo.jpg"/>
</div>
<div class="tbar-right">
<div id="User"><!--the script will feed this div--></div>
<!--Dummy Text-->Jasdeep, you have 24 routemiles |
My Profile |
Logout
</div>
</div>
</div>
</body>
...and these are the styles:
* {
margin:0;
padding:0;
}
body{
-x-system-font:none;
background:#FFF;
border:0 none;
color:#555F6A;
font-family:Verdana,arial,helvetica,sans-serif;
font-size:0.7125em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5em;
margin:0;
padding:0;
text-align:center;
}
.container {
text-align: center;
}
#topbar {
background-color: #df3e36;
height: 32px;
width: 1004px;
}
.logo {
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}
.tbar-right {
text-align: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}
.tbar-right a{
color: #FFF;
}
Please, help!
.container{margin:0 auto;}
As long as you have defined an explicit width. You should also probably replace
<div class = "container">
with
<div class="container">
Should center container. Make sure you don't float it.
.container{
width: /* must specify a width */
margin-left:auto;
margin-right:auto;
}
This should fix the alignment
.logo{
float:left;
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}
.tbar-right{
float: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}
And you may need to rearrange the HTML a bit by putting the .tbar-right before the .logo
Try this:
#topbar { margin: 0 auto;}
The logo isn't aligning with the other stuff because it has a different padding-left. Change to
.logo {
padding-left: 0px; //or don't even list a padding-left,
padding-top: 4px;
width: 15%;
height:27px;
}
OH if you wanted it on the same line horizontally float them both to the left or right, and make sure there's enough space. ;D