I'm trying to create a fluid layout, but have a small problem with the height of the container. The outer <div> (yellow, ip_A-1) is not adjusting to the height of it's children.
See a fiddle here.
I've tried placing a spacer inside but it's not working. Also making ip_BA_1 and ip_BB_1 position:relative does nothing.
The HTML:
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
<div class="spacer_0"></div>
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
The CSS:
.spacer_0 {
clear:both;
width:100%;
height:0px;
}
.ip_A_1 {
position: relative;
width: 100%;
height: auto;
min-height: 28px;
text-align: left;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size:1em;
background: yellow;
}
.ip_BA_1 {
float: left;
width: auto;
padding: 4px 10px 20px 45px;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size: 0.88889em;
line-height: 0.88889em;
font-weight: bold;
background: blue;
color: white;
}
.ip_BB_1 {
clear: both;
float: left;
margin-top: -15px;
width: 100%;
}
.ip_BBA_1 {
position: absolute;
left: 30px;
right: 0px;
padding-left: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ccc;
border: 1px solid #666;
}
The problem is that you are using floats and position:absolute; on the children these rules prevent the children from expanding parents height.
change the ip_BBA_1 css position:relative.
Related
How do I make the height of text(tagline) responsive?
I tried padding bottom, but it doesn't work. Is there a way I can make the text's height responsive?
<p class="logo">LoremIpsum</p>
<p class="tagline">LoremIpsum</p>
<img class="mainImage" src="FullSizeRender.jpg">
css:
body{
background-color: black;
margin: 0;
}
.logo{
font-size: 3em;
color: white;
text-align: center;
}
.tagline{
font-size: 0.9em;
color: white;
text-align: center;
position: absolute;
top:20%;
/* padding-bottom: 20%;*/
}
.mainImage{
width: 50%;
height: auto;
}
Try putting the <p> inside a <div> or <span> and assigning the height values to them.
as you can see the border right is all the way at the right of the header I want to move it closer to the middle text.
[1]: https://i.stack.imgur.com/HRYwR.png
#header {
font-family: "NotoNashkArabic", "ProximaNova-regular", "Helvetica Neue", "Helvetica", Roboto, Arial, sans-serif;
margin: 0;
background-color: #2E7061;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
}
#title {
color: white;
text-align: center;
padding:10px 5px 20px 5px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
}
html
<body>
<div id="header">
<img src="Capture1.png"/>
<p id="title">THE Text</p>
</div>
</body>
Could you add this to your css #title
display: inline-block;
which will be,
#title {
display: inline-block;
color: white;
text-align: center;
padding:10px 5px 20px 5px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
I hope it solves your problem
The code you provided is not enough to reproduce what you show in the image. But I'll assume your image is floated left for now.
#header {
font-family: "NotoNashkArabic", "ProximaNova-regular", "Helvetica Neue", "Helvetica", Roboto, Arial, sans-serif;
margin: 0;
background-color: #2E7061;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
}
#header img{
float: left;
}
#title {
color: white;
text-align: right;
padding-right: 20px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
width: 50%;
margin-left: 200px;
height: 100%;
line-height:80px;
}
<body>
<div id="header">
<img src="http://placehold.it/200x80.png">
<p id="title">THE Text</p>
</div>
</body>
What I did here was:
Set width: 50% on your #title. (Arbitrary value)
I set the left margin to the width of your image (I guessed at 200px.) The reason is because the picture overlaps the width of the <p>-tag when the image is floated. I consider it more concise to have the values without overlap.
I aligned the text right to get it close to the border. Use 'padding-right' to control the space between text and border.
I removed vertical padding and set the line-height to the height of the header/image to get the text vertically centered and the border to reach from top to bottom of the header.
Other things to note:
margin-right: 20px; // This has no meaning...
margin: -.1px; // ...since it gets overridden by this.
HTML:
<div id="main" class="rounded-corners">
<div id="benefits">
<img src="/benefits-heading.png" style="padding: 30px;" />
<div id="corporateside">
<h1>Corporate Benefits</h1>
<p>blah</p>
</div>
<div style="clear: both;"></div>
<div id="employeeside">
<h1>Employee Benefits</h1>
<p>blah</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
CSS:
#corporateside { width: 420px; height: 100%; position: absolute; left: 0; padding: 20px; height: 100%; display: block; }
#corporateside h1 { font-size: 24px; font-weight: 500; }
#corporateside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#corporateside p { padding: 0px; margin-top: -10px; }
#employeeside { width: 420px; position: absolute; right: 0; padding: 20px; height: 100%; display: block; }
#employeeside h1 { font-size: 24px; font-weight: 500; }
#employeeside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#employeeside p { padding: 0px; margin-top: -10px; }
#benefits { position: relative; height: auto; }
#main { width: 940px; height: auto; background-color: #ffffff; margin: 0 auto; padding: 0; background: #ffffff; border: 2px solid #ffc40d; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }
I have fixed this issue by removing the position: absolute; from each div. Also I removed the <div style="clear: both;"></div> between the two divs. Thanks for your help!
It's because your divs are set with position: absolute;. This removes the div from the document flow and so the containing element behaves as if the divs are not present for its layout.
I'm not sure exactly what you're going for, but if you want to adjust the position of the two divs, try position relative or examine their margins and padding. A CSS reset can be very helpful as a general tool for making consistent layouts, especially across browsers.
Here's a jsfiddle of my suggestion, showing the divs side by side and the container behaving as desired.
http://jsfiddle.net/wCnLZ/
Please help. I want to achieve that text and button on yellow box be alligned left and right (text on left side - margin 20 px; button on right side - margin 20 px) and menu in footer aligned with yellow box.
I can't add picture, sorry.
Edit: Added JSFiddle - http://jsfiddle.net/wqBEf/
This is my css code:
#page
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
background-color: blue;
}
#page > #main
{
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
background: white;
border-radius: 5px;
margin-top: 20px;
}
#main > #inner
{
margin: 20px;
}
#page-title h1
{
font-size: 24px;
text-align: center;
}
#footer-hotline
{
height: 50px;
background-color: rgb(255,207,0);
border-radius: 5px;
box-shadow: 0px 3px 3px #999999;
margin-top: 20px;
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
#footer-hotline > .part
{
float: left; width: 33%;
margin-left: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part input
{
vertical-align:middle;
}
#footer
{
margin-top: -25px;
height: 100px;
line-height: 25px;
background-color: white;
text-transform: uppercase;
border: 1px solid black;
}
#footer > .link
{
float: left;
border-right: 1px solid #000;
margin-top: 50px;
}
#footer > .link > div
{
margin-left: 5px;
margin-right: 5px;
}
And this is my html code:
<div id="page">
<div id="main">
<div id="inner">
<div id="page-title">
<img src="myLogo.png" alt="Schulz logo" />
<h1>Some title</h1>
</div>
<div id="content">RenderBody</div>
</div>
<div class="f-c"></div>
</div>
<div id="footer-hotline">
<div class="part">Hotline: 0800/888 888</div>
<div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div>
<div class="f-c"></div>
<div id="footer">
<div class="link"><div>GTC</div></div>
<div class="link"><div>About</div></div>
<div class="link"><div>Help</div></div>
<div class="link"><div>Language</div></div>
</div>
Thanx for answers, suggestions and comments.
See http://jsfiddle.net/wqBEf/1/ for an update.
Noteworthy changes.
I added left align-left and right align-right classes set for float and for text alignment, respectively.
I set your links to display: inline because it is the easiest way to center a list of items horizontally.
Those were the main two changes. The rest of the changes were just to support the above two, such as removing/adding some margins.
You could use the :first-child pseudo-class for the issue of getting the two items to work together (this will only work if you have only two at any one time). It's also well supported going back to IE7
You also need to implement float:right, direction:rtl, and margin-right:
#footer-hotline > .part
{
float: right; width: 33%;
direction: rtl;
margin-right: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part:first-child
{
direction: ltr;
float: left;
margin-left: 20px;
}
Eli Gassert's answer should suffice for centering the nav
Source: http://jsfiddle.net/YZ2Uz/
Demo: http://jsfiddle.net/YZ2Uz/show
I'm trying to build a website for some coursework and my two middle columns are being pushed over to the left for some reason. The header, nav bar and footer all align vertically but the two floated divs in the middle are being forced to the left.
HTML
<html>
<head>
<title>Churches Of Norwich</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="site.css">
</head>
<body>
<div id="bg">
<div id="content">
<div id="headboxspacer"></div>
<div id="head-box">Churches of Norwich</div>
<div id="navbar" style="float: none">
<div id="tabs">
<ul>
<li>Home</li>
<li>Map</li>
<li>Churches</li>
<li>Comments</li>
<li>Gallery</li>
</ul>
</div>
</div>
<div id="container" style="overflow:hidden;width: 100%">
<div id="homeboxleft" style="clear: both">Testing</div>
<div id="homeboxright" style="clear: both" >Right</div>
</div>
<div id="footer"> footer </div>
<div id="bottomspacer"></div>
</div>
</div>
</body>
</html>
CSS
#content {
width: 1200px ;
height: max-content;
margin-left: auto ;
margin-right: auto ;
}
#headboxspacer{
height:50px;
width:100%;
}
#head-box{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
}
#navbar{
height: 50px;
background-color: #003651;
width: 100%;
margin: 5px;
padding: 10px;
font-family: sans-serif;
font-size: 20pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
text-decoration-line: underline;;
width: 100%;
}
#tabs ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
display: inline ;
}
#tabs ul li {
margin: 0 ;
padding: 10px ;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}
#tabs li a {
color: #FEE7BE;
background-color: #003651 ;
padding: 8px ;
text-decoration: none ;
display: inline ;
}
#tabs li a:hover {
color: gainsboro ;
background-color: #003651 ;
}
#container{
width: 1200px;
}
#homeboxleft{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: right;
margin: 0px;
opacity: 10%;
filter:alpha(opacity=10);
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
#mainbox{
background-color: #FEE7BE;
height: 500px;
width: 100%;
opacity: 0.6;
}
#footer{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
clear: both;
}
#bottomspacer{
height:100px;
width:100%;
}
because the padding of the navbar is added to the width of the navbar.
you have to use the box model solution with an inner div
http://css-discuss.incutio.com/wiki/Box_Model_Hack#Box-in-a-box
then you have the same widths and appearance in all browsers
Your "container" which holds the two columns is set to "width =100%".
It means that the div will spread on the entire width of the page.
Try deleting this width attribute, and beside that delete all float attributes.
I have also attached a screenshot.
and this is the fullscreen preview of the fiddle:
http://fiddle.jshell.net/zHBhs/2/show/
I think your problem is the inline css here:
<div id="homeboxleft">Testing</div>
<div id="homeboxright">Right</div>
//-------------------^-------------just removed the clear:both inline css here
and in your this css class just removed the margin property:
#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;
margin: 0; // <------------------made margin for all sides to 0
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
try this and see if this solves, checkout the fiddle here: http://jsfiddle.net/zHBhs/2/
do some work on these css classes as well:
#head-box{
padding:0; // change paddings to 0
margin: 5px 0; // just apply to top and bottom margins
}
#navbar{
margin: 0; // change paddings to 0
padding:10px 0; // just apply to top and bottom margins
}
#footer{
margin: 0; // change paddings to 0
padding:10px 0; // just apply to top and bottom margins
}
Get both of the sides, left and right in a main div. Then apply this css:
#maindiv{
overflow:hidden;
border-bottom:1px solid rgba(200,200,200,0.3);
border-top:1px solid rgba(200,200,200,0.3);
}
#left{
width:60%;
float:left;
overflow:hidden;
}
#right{
overflow:hidden;
}
Note: The right div will be attached with left one, If you want to float it to right, Apply float:right; to it. But float to only left is suggested :)
An Example for both sides using the above trick.