I want to position "rightBottomPart" to the bottom of "rightPart" and I want "rightPart to be as high as "leftPart". The problem is that I don't know the height of the content in "leftPart" and therefore I can't set the height of "text". (Height in "text" would solve it)
Right now it looks like this:
and I want it to look like this:
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body style="margin: 0px 0px 0px 0px;">
<div id="headers" style="background-color: Olive; width: 300px; height: 50px;"></div>
<div id="text" style="background-color: Navy; position: relative; width: 300px;">
<div id="leftPart" style="background-color: Gray; width: 200px; float: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="rightPart" style="background-color: Red; float: right;">
<div id="rightTopPart" style="background-color: Lime; position: absolute; right: 0px; top: 0px;">top</div>
<div id="rightBottomPart" style="background-color: Yellow; position: absolute; right: 0px; bottom: 0px;">bottom</div>
</div>
</div>
</body>
</html>
It looks right in IE7, but not in the rest of the browsers I've tested. If I remove the DOCTYPE-tag it also looks good in IE8, but still not in Google Chrome.
What am I missing?
Thanks
Carl
To keep floats and position under control, you need to keep two things in mind: the position is absolute according to its parent element and usually needs dimensions, and floated objects do not have dimensions by default.
Since your test represents a simple two-column model, have a look at this nice overview here, it might clarify things up a little bit: equal height columns with css
So, the trick here is to give #text a float and pos:rel and then the #right*Part will know where they are positioned.
Have a look here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
body { margin: 0; }
#headers { background: Olive; width: 300px; height: 50px; }
#text { background: Navy; position: relative; width: 300px; display: block; float:left; }
#leftPart { background: Gray; width: 200px; float: left; display: inline-block; }
#rightPart { background: Red; }
#rightTopPart { background: Lime; position: absolute; right: 0; top: 0; }
#rightBottomPart { background: Yellow; position: absolute; right: 0; bottom: 0; }
</style>
</head>
<body>
<div id="headers"></div>
<div id="text">
<div id="leftPart">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="rightPart">
<div id="rightTopPart">top</div>
<div id="rightBottomPart">bottom</div>
</div>
</div>
</body>
</html>
Kind regards, mtness
Related
This is my code:
* {
font-size: 40px;
font-family: Arial;
color: blue;
text-transform: uppercase;
}
div {
height: 100vh;
}
#one {
display: flex;
width: 100%;
}
#two,
#four {
width: 45px;
background-color: blue;
}
#three {
width: 100%;
display: flex;
}
#button,
#text {
border: 1px solid blue;
margin: 10px;
}
#text {
width: 100%;
/* overflow: auto;
white-space: nowrap; */
}
<div id="one">
<div id="two">
</div>
<div id="three">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div id="button">Button</div>
</div>
<div id="four">
</div>
</div>
I want to add white-space: nowrap; for the text (#text), but it destroys the layout, the areas with the blue backgrounds get lost. I saw that adding min-width: 0; or min-height: 0; could help, but it doesn't work in this case.
Has somebody an idea to fix that? Would be very thankful. :)
For clarifying: The text from #text should stay in one line, that's all.
What is happening?
The divs two, three and four are had the flex property set to its default values:
div {
flex-grow: 0;
flex-shrink: 1;
flex-base: auto
}
Which means that for each div should: calculate the "best" width (flex-base: auto), if there is enough space for the three divs there is no need to grow to fill it (flex-grow: 0), if there isn't enough space shrink them proportionally (flex-shrink: 1).
When you put white-space: nowrap; in the three div, there is not enough space (since it "best" width will be as much as is needed to hold the single long line of text.
Solution:
Add flex-shrink: 0 to the blue divs, and flex-grow: 1 and overflow: auto to the central div. This way, the blue divs will always have 45px width, and the central one will always fill the remaining space.
UPDATE
Since you now have a new div and button inside div three, there is a few additional changes: We'll make div three also a flex container, and set flex-grow and flex-shrink to appropriate values for the inner text and button.
* {
font-size: 40px;
font-family: Arial;
color: blue;
text-transform: uppercase;
}
div {
height: 100px; /* You'll probably want a lower height */
}
#one {
display: flex;
width: 100%;
}
#two,
#four {
flex-shrink: 0; /* no shrink */
width: 45px;
background-color: blue;
}
#three {
display: flex;
flex-grow: 1; /* fill all available space */
width: 0px; /* will grow from 0px to fill all space*/
}
#text {
flex-grow: 1; /* fill all available space */
border: 1px solid blue;
margin: 10px;
white-space: nowrap; /* moved from "#three" */
overflow: auto; /* moved from "#three" */
}
#button {
flex-shrink: 0; /* no shrink */
border: 1px solid blue;
margin: 10px;
}
<div id="one">
<div id="two">
</div>
<div id="three">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div id="button">Button</div>
</div>
<div id="four">
</div>
</div>
According to MDN, setting white-space: nowrap "suppresses line breaks (text wrapping) within the source." This means that all of your line breaks will be gone for that element and it will go on horizontally as long as there is text.
But to keep everything within the viewport and keep the blue bars around the text, you should first wrap your Lorem Ipsum text in a p tag or other text element, and then change your CSS to something like this:
:root {
--bar_width: 45px;
}
* {
font-size: 40px;
font-family: Arial;
color: blue;
text-transform: uppercase;
}
div {
height: 100vh;
}
#one {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100vw;
}
#two,
#four {
width: var(--bar_width);
background-color: blue;
}
#three p {
max-width: calc(95vw - (2 * var(--bar_width)));
white-space: nowrap;
overflow: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div id="one">
<div id="two">
</div>
<div id="three">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div id="four">
</div>
</div>
</body>
</html>
This adds an overflow property set to scroll so that the text can be reached without it streching out the viewport. I also set the max width the element can take up so that CSS knows when to start cutting off the text. I also added flex-direction: row; justify-content: space-between; to your #one selector so that the elements space out horizontally.
You can now change the max-width property set in the #three p selector to any value you want and the text (with scroll) will be centered between the blue bars.
You need to set the flex-basis property of div#three, div#two, and div#four to something like 33.3%
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
You're also setting the height of all divs to 100vh, and when the overflow occurs on your inner block elements, it doesn't know where to stop unless you truncate the text: https://css-tricks.com/flexbox-truncated-text/
* {
font-size: 40px;
font-family: Arial;
color: blue;
text-transform: uppercase;
}
#one {
display: flex;
width: 100%;
}
#two,
#four {
flex-basis: 33%;
width: 45px;
background-color: blue;
}
#three {
width: 100%;
flex-basis: 33%;
white-space: nowrap;
overflow-x: hidden;
/* white-space: nowrap; */
}
<div id="one">
<div id="two">
</div>
<div id="three">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div id="four">
</div>
</div>
This is my .html file with a wrapper that contains the header with the menu - sidebar - a div for the content :
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css?v=1">
</head>
<body>
<div class="wrapper">
<header id="header"> Header - Menu</header>
<div class = "central-body">
<div id = "sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id = "main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<footer> </footer>
</div>
</body>
</html>
This is my css:
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
background-color: black;
}
.wrapper{
height: 100%;
}
#header{
background-color: blue;
height: 40px;
width: 100%;
}
.central-body{
height: 100%;
width:100%;
background-color: purple;
}
#sidebar{
height: 100%;
width: 20%;
background-color: yellow;
float: left;
}
#main-content{
height: 100%;
background-color: green;
}
footer{
width:100%;
height: 40px;
background-color: red;
}
My problem is that i have to scroll down "40px" to see my footer, even if there are few words in "sidebar" and "main-content". How can i fix that?
You can make the .central-bodyheight 100% minus the height of the header and the footer like this:
height:calc(100% - 80px) //header 40px + footer 40px
We're using calc for this to work.
(This will also work if we do the calc on the .wrapper)
Here is an working example
Code:
.central-body {
height:calc(100% - 80px);
}
I want to create a custom alert box with bootstrap.
But the vertical aligment of the text and the icon, does not work. So here`s the code:
HTML:
<div class="alert-box alert-box-info text-center clearfix" style="display: inline-block;">
<i class="fa fa-info text-info pull-left"></i>
<div class="text text-info"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
</div>
CSS:
.alert-box
{
margin: 20px 0;
border: 1px solid #dbdbdb;
display: inline-block;
height: 100px;
}
.alert-box .fa {
font-size: 40px;
padding-left: 20px;
display: table-cell;
vertical-align: middle;
}
.alert-box .text {
margin: 0px;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.alert-box-info
{
background: #f4f8fa;
border-bottom: 3px solid #5bc0de;
}
.alert-box-info h4
{
color: #5bc0de;
}
The jsFiddle Demo
Can somebody tell me, why the vertical alignment does not work and how I can fix that?
Answer was completely updated as a result of the answer to this question.
Your layout should be achievable with flex-box. Just add on the container:
display: flex;
align-items:center;
Anything table related of vertical align related should be removed from all places. You can create your desired layout by forcing table layout on some elements, but that is not the way to go here since you don't have a real table and tabular data.
Note: We need to explicitly add flex-shrink: 0 on the small columns on the edges because of a Chrome bug (just fixed for FF 34) that causes incorrect shrinking. According to the specs, there should not happen any shrinking by default.
Demo:
.alert-box
{
margin: 20px;
border: 1px solid #dbdbdb;
display: flex;
align-items:center;
height: 100px
}
.alert-box .fa {
font-size: 40px;
padding-left: 20px;
flex-shrink: 0;
}
.alert-box .text {
margin: 0px;
flex-grow: 1;
}
.alert-box-info
{
background: #f4f8fa;
border-bottom: 3px solid #5bc0de;
}
.alert-box-info h4
{
color: #5bc0de;
}
.alert-btn {
flex-shrink: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert-box alert-box-info text-center clearfix">
<i class="fa fa-info text-info"></i>
<div class="text text-info"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
<div class="alert-btn">Test</div>
</div>
Simplest way is to change style of div:
<div class="alert-box alert-box-info text-center clearfix" style="display: table-cell; vertical-align: middle;">
JavaScript is the best option here. I've added transition for line-height for smooth alignment.
Fiddle
function doMath() {
document.getElementsByClassName('fa-info')[0].style.lineHeight = document.getElementsByClassName('text')[0].clientHeight + 'px';
}
doMath();
window.onresize = doMath;
.alert-box {
margin: 20px 0;
border: 1px solid #dbdbdb;
display: table;
}
.alert-box .fa {
font-size: 40px;
padding-left: 20px;
display: table-cell;
transition: line-height 0.1s;
}
.alert-box .text {
padding: 20px;
margin: 0px;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.alert-box-info {
background: #f4f8fa;
border-bottom: 3px solid #5bc0de;
}
.alert-box-info h4 {
color: #5bc0de;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="alert-box alert-box-info text-center clearfix" style="display: inline-block;"> <i class="fa fa-info text-info pull-left"></i>
<div class="text text-info">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
The easiest way to vertical align a text if it has only 1 row is the line-height properties:
.alert-box .fa {
font-size: 40px;
padding-left: 20px;
line-height: 100px;
}
http://jsfiddle.net/Clear/qnj3ohqh/15/
I want to center the text in a div. I found this code on this site that works:
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
But when I try to add classes instead of global div or span, the code does not work anymore:
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div class="titleDiv">
<span class="titleSpan">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</div>
Any ideas why it does not work? I'm using VS2010 Pro.
Edit:
The css code is in a separate css file that is imported ok (when I change the background color in code then I can see the change in Chrome)
Edit 2:
Here is the entire markup:
Default.aspx file:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body class="titleDiv">
<form id="form1" runat="server">
<div class="titleDiv">
<span class="titleSpan">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</form>
</body>
</html>
StyleSheet.css file:
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
You need to have your CSS in a tag, e.g.
<style>
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
ext-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
ine-height: normal;
}
</style>
<div>
content
</div
I think it can be a solution for you.
Here
is the link
HTML
<body>
<div class="titleDiv">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</body>
</html>
CSS
.titleDiv {
background-color:red;
text-align:center;
margin-left:auto;
margin-right:auto;
width:500px;
height:200px;
}
.titleDiv span{
background-color:aqua;
position:relative;
top:45%
}
top:45% must be
top:TOTAL HEIGHT(which is 200px here) - SPAN HEIGHT(WHICH IS JUST A FONT SIZE AND ITS PADDING):
if the css is in the same file use <style> </style> tags:
<style type="text/css">
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
What will produce a gap from 100px:
<body>
<form id="form1" runat="server">
<div class="titleDiv"></div> <%--The gap--%>
<div class="titleDiv">
<span class="titleSpan">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</form>
I know this is a noob question, but I just can't figure this out! I'm laying out a page for our intranet and all I need to do is position some divs side by side. Each container is a different item, but all containers have the same structure, a header, some descriptive text, and an image. I will be adding items as they are given to me. This is basically just a page i'm creating for employees to sell items. Here is my css and an image of what I'm trying to achieve. Please let me know if this doesn't make sense, but as smart as you guys have proven to be in the past, i'm sure you get the idea.
.wrapper {
width: 1260px;
height: 900px;
margin: 0px auto;
position: relative;
}
.container {
width: 400px;
height: 400px;
margin: 10px;
position: absolute;
}
.itemText {
width: 350px;
height: 190px;
padding: 0px;
position: absolute;
top: 25px;
left: 25px;
}
.itemHead {
padding: 0px;
margin: 0px;
}
.itemDesc {
padding: 10px;
margin: 0px;
}
.itemThumb {
width: 350px;
height: 150px;
position: absolute;
bottom: 25px;
left: 25px;
}
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
</div>
</body>
</html>
Don't position your containers absolutely.
.container {
width: 400px;
height: 400px;
margin: 10px;
position: relative;
float:left;
}
At the end of the last container div, you'll need a div to clear: left;
<div style="clear:left;"></div>
Now when you add more div's, they will auto float, and the container will get cleared.
Absolute positioning is in that case really useless.
try this:
.container {
position: relative;
float: left;
width: 400px;
height: 400px;
margin: 10px;
}
Your divs have the same height, so using float is pretty convenient. By giving your .container the attribute position: relative .itemThumb is positioned correctly.
This should work
I don't know if I understand exactly
but one way to get the containers to line up is to set the .container class to
.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
}
Adding the display: inline-block;
And removing the position:absolute.
Setting your width for each container to around 30% of the wrapper will ensure that three containers get lined up before they go to a new line.
You will need to take off all the position: settings IN your css file so that all the information stays contained within the div.
e.g.
.wrapper {
width: 1260px;
height: 900px;
margin: 0px auto;
position: relative;
}
.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
border: 1px solid black;
}
.itemText {
width: 350px;
height: 190px;
padding: 0px;
top: 25px;
left: 25px;
}
.itemHead {
padding: 0px;
margin: 0px;
}
.itemDesc {
padding: 10px;
margin: 0px;
}
.itemThumb {
width: 350px;
height: 150px;
bottom: 25px;
left: 25px;
}