How can i get my two div's to take up all the page together (10% AND 90%) and sit next to each other.
HTML:
<body>
<div class="header" id= "headerxx">
</div>
<div class="mainbody">
</div>
CSS:
body {
background-color: #F0F0F0;
margin-top: 0px;
width: 100%;
margin-left: 0px;
}
.header {
width: 10%;
margin-top: 0px;
float: left;
}
Here you go (jsFiddle)
HTML
<div class="main">
<div class="header" id= "headerxx">
</div>
<div class="mainbody">
</div>
<div class="clear">
</div>
</div>
CSS
body {
background-color: #F0F0F0;
margin-top: 0px;
width: 100%;
margin-left: 0px;
}
.header {
width: 10%;
height: 200px;
margin-top: 0px;
float: left;
background-color: #000000;
}
.mainbody {
width: 90%;
height: 200px;
float: right;
background-color: #666666;
}
.clear {
clear: both;
}
I have put the heights in for demo purposes, so you can see what is going on. In practice, you don't need these.
If yo are targeting the latest browser you can align 2 div next to each-other using display:table and display:table-cell;.. Have a look at DEMO.
In this layout I give display:table to body element in your case you've to give this property to parent element.
CSS is
body{width:100%; display:table;}
.header, .mainbody {
display:table-cell;
height:200px;
border:1px solid gray;
}
.header{width:10%; background:rgba(34%, 63%, 23%, 1);}
.mainbody{width:90%; background:rgba(55%, 67%, 19%, 1);}
<div class="header" id="headerxx">
</div>
<div class="mainbody">
</div>
Try This.
CSS
.container{
position: relative;
min-height: 100%;
}
.leftDiv{
float: left;
min-height: 100%;
background: #f0f0f0;
width: 10%;
}
.rightDiv{
float: left;
background: blue;
color: white;
width:90%;
height: 100%;
}
HTML
<div class="container">
<div class="leftDiv">
<p>This is the left div</p>
</div>
<div class="rightDiv">
<p>This is the Right Div</p>
</div>
Can't understand your coding. The best interpretation I could come up is that you want 2 divs lie next to each other, so I made a parent div .container here, position it to relative so that all its children divs will rely on it for positioning and dimensions, I also give it min height of 100% for demo purposes.
Then the divs that lie next to each other are the .leftDiv and the .rightDiv, each floated left so that the element next to it will take the remaining space of the parent it didn't cover. Also I gave it widths 10% and 90%, and a height of 100% again for demo purposes.
Related
Right now Im trying to put an image on the top of a div. The divs are in horizontal, and I don´t know why, but when I put the image its position affects all external divs... I mean, the image should only affect the div in which I put it.
I know this can be a little bit difficult to undestand, I took a capture of my divs: Capture. As you can see, the height of my image affects the external divs.
Here is the HTML code:
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel"><img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue"></div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
And the CSS:
.hoteles{
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles{
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel{
height: 12.5em;
min-width: 23%;
display: inline-block;
background-color: brown;
margin-bottom: 2%;
}
.hotel img{
width: 100px;
}
Other question is... when I put "width 100%" its does not do it, I just can resize the image with pixels... Thanks !
You need to float the divs, currently your divs are positioned as inline-block which is causing disorder. Additionally you can use vertical-align: top to order the inline-block.
Working example:
JSFiddle
.hoteles {
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles {
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel {
height: 12.5em;
min-width: 23%;
background-color: brown;
float: left;
margin:2% 5px 2% 0;
}
.hotel img {
width: 100px;
float:left;
}
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel">
<img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue" />
</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
As for your second question, you need to have a width for the parent of img. Currently it uses min-width, change it to width and give your img the width of 100% and it will expand to the percentage of the parent. Like the following:
.hotel {
width: 23%;
}
.hotel img {
width: 100%;
}
Try adding the following CSS rule:
.hotel { vertical-align: top; }
You are seeing the result of inline elements being positioned along the baseline.
I feel like this should be much easier than I am making it...I'm looking for a solution to have 1 solid color extend from the left and end at a logo, then have a second solid color extend all the way to the right. I want the wrapper divs to extend 100%. So something like:
<div id="header-wrap"><!--100% page width-->
<div id="header"><!--1000px centered fixed width-->
<div id="logo"></div><!-- align left-->
<div id="nav"></div><!-- align right-->
</div>
<div id="sub-header-wrap">
...
</div>
</div>
Here's an image showing what I mean:
There is a lot that goes into this.
Let me start of with a link to a working fiddle: JSFiddle
How can I explain this?
Basically I have the two full-width divs that have the full background color. Inside those two divs I have a div classified as .inner that has 80% of the width (which can be whatever you want) that is aligned to the center with margins.
Inside .inner I have a left div and a right div of the proper sizes to contain the logo/navigation. Inside the left divs, I have another div, .shade that will darken the left side of the header.
The .left divs are relatively positioned and the .shade divs are absolutely positioned.
CSS:
body{
margin: 0;
}
header
{
display:block;
width: 100%;
}
header .top
{
background: #00a;
text-align: center;
color: white;
}
header .inner
{
width: 80%;
margin: 0 10%;
text-align: left;
}
header .inner .logo, header .inner .left
{
display: inline-block;
width: 20%;
margin: 0;
text-align: center;
height: 100%;
padding: 10px 0px;
position: relative;
z-index: 1;
}
header .inner .right
{
display: inline-block;
width: 78%;
margin: 0;
text-align: right;
}
header li
{
display: inline-block;
list-style: none;
}
header .bottom
{
background: #ca0;
}
header .shade
{
width: 1000%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background: rgba(0, 0, 0, .3);
z-index: -1;
}
HTML:
<header>
<div class="top" align="center">
<div class="inner">
<div class="logo">
Logo
<div class="shade"></div>
</div>
<div class="right">
<li>Nav 1</li>
<li>Nav 2</li>
</div>
</div>
</div>
<div class="bottom">
<div class="inner">
<div class="left">
Subtext
<div class="shade"></div>
</div>
<div class="right">
<li>Link</li>
</div>
</div>
</div>
</header>
Full JSFiddle
If I understand you correctly, try something like this in a separate CSS file, or within a <style> block. It's not tested though, sorry.
#header {
margin: 0 auto; /* for centering */
width: 1000px;
}
#logo {
float: left;
width: 250px; /* for example */
background-color: red; /* for example */
}
#nav {
float: right;
width: 750px; /* for example */
background-color: blue; /* for example */
}
UPDATE:
If you can afford CSS3, this post can be intresting for you as well.
I Know there are several questions about this topic, however I think they depend a bit on another CSS properties given before.
I have a nested <div id="tituloParametros>" and I need its text/contain to be centred on vertical and horizontal position.
This is my markup:
<div id="outer">
<div id="parametros">
<div id="tituloParametros">Ingresa los puntos conocidos x,f(x)</div>
</div>
<div id="resultados">
<div id="graficos">
<div id="bars"></div>
<div id="fx"></div>
<div id="pinchetabla">Tabla inútil</div>
</div>
<div id="loquerealmenteimporta"></div>
</div>
</div>
And this is the applied CSS:
#outer{
padding-left: 15px;
padding-top: 15px;
width: 1350px;
height: 640px;
}
#parametros {
float:left;
width: 20%;
height: 100%;
}
#tituloParametros {
height: 9%;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#resultados {
float:right;
width: 80%;
height: 100%;
}
#graficos {
height: 75%;
width: 100%;
}
#bars {
float: left;
height: 100%;
width: 30%;
}
#fx {
float: left;
height: 100%;
width: 30%;
}
#pinchetabla {
float: left;
height: 100%;
width: 40%;
}
#loquerealmenteimporta {
height: 25%;
width: 100%;
}
I thought that:
text-align:center;
vertical-align:middle
both will make it but it didn't. Adding display: table-cell; doesn't solve it neither, it actually crops the background to the text limits.
This is how it looks like
You're right - the table/table-cell approach doesn't work here.
As an alternative, you could resort to the absolute positioning method. An element will be vertically centered when the top value is 50% subtracted by half the element's height. In this instance, it shouldn't be a problem because the height is already set with the % unit. 100% - 50% - 9%*.5 = 45.5% If this weren't the case, you could use calc() or negative margins to subtract the px unit from the % unit. In this case, it's worth noting that the child element is absolutely positioned relative to the parent element.
Updated CSS -- UPDATED EXAMPLE HERE
#parametros {
float:left;
width: 20%;
height: 100%;
outline : 1px solid black;
position:relative;
}
#tituloParametros {
background-color: red;
width: 100%;
height: 9%;
text-align:center;
position:absolute;
top:45.5%
}
The element #tituloParametros is now centered within the parent element. If you want to center the text within it, you could wrap the text with a span element and then use the table/table-cell vertical centering approach:
UPDATED EXAMPLE HERE
#tituloParametros {
/* other styling.. */
display:table;
}
#tituloParametros > span {
display:table-cell;
vertical-align:middle;
}
Here is my fix for this!::::
HTML:
<div id="parametros">
<div id="tituloParametros"><p>Ingresa los puntos conocidos x,f(x)</p></div>
</div>
CSS:
#tituloParametros {
height: 70px;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#tituloParametros p{
line-height: 70px;
}
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Here is the demo
http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html
In the following code, the left both divs have different heights (not fixed). Is there a way to make height of div with the less height equal to the height of div with high height without using the CSS table property or javascript?
PS. There is no reason not to use table property, I just want to know if theres any alternative.
<div class="wrap">
<div class="left">less content</div>
<div class="right">more content</div>
</div>
CSS:
.wrap{
overflow: hidden;
background: green;
width: 100px;
margin: 30px 100px;
}
.left{
background: yellow;
width: 50px;
float:left;
overflow: hidden;
}
.right{
background: brown;
width: 50px;
float:left;
overflow: hidden;
}
JSFiddle:
http://jsfiddle.net/Vv2Ue/
I just tackled this issue today. Checkout the following resource: http://www.vanseodesign.com/css/equal-height-columns/
I like the last suggestion, which basically creates the illusion of equal heights.
Html
<div id="container-outer">
<div id="container-inner">
<div id="sidebar">
<p>Sidebar</p>
</div>
<div id="content">
<p>Main content</p>
</div>
</div>
</div>
CSS
#container-outer {
float:left;
overflow: hidden;
background: #eee;
}
#container-inner {
float:left;
background: #555;
position: relative;
right:75%;
}
#sidebar {
float: left;
width: 25%;
position: relative;
left: 75%;
}
#content {
float: left;
width: 75%;
position: relative;
left: 75%
}
Any idea how to make the middle sections in this code below (jsFiddle here) adjust to the height of the actual container without specifying fixed values or Javascript? In this fiddle I tried setting absolute and relative for the container but the page always shows vertical scrollbar as the height of the container exceeds the height of the actual page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { margin: 0; height:100%;}
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
This seems to do what you want:
http://jsfiddle.net/grc4/XTQuT/2/
Absolute positioning takes #middleContainer and #footerContainer out of the normal flow. #middleContainer is forced to take up the size of the whole page, but is given a margin to allow room for the header and footer. #footerContainer is fixed to the bottom of the page with bottom: 0. The left and right columns can then just use height: 100% to take up the right space, but the middle column still needs absolute positioning to force it to only use the remaining space.
................................
Hi maya i suggest u can u used table properites in your code if yes than check to this demo
HTML
<div class="wrap">
<div class="header">header</div>
<div class="conternt">
<div class="left">Left sdaf dsaklf jdslkaf jdlskfj dlskafj dslkf jdslkf jsdlakfj sdlakfj sdlkf jlsdkfj sladkfj sdalkfj sadlkf </div>
<div class="center">Center flexible</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
Css
.header{
background:green;
color:#fff;
padding:20px;
}
.conternt{
background:yellow;
display:table;
width:100%;
}
.left, .right, .center{
display:table-cell;
color:#fff;
}
.left, .right{
width:100px;
}
.left{
background:rgba(0,0,0,0.5)
}
.center{
background:rgba(0,0,0,0.1)
}
.right{
background:rgba(0,0,0,0.9)
}
.footer{
background:red;
color:#fff;
padding:20px;
}
live demo
Specify the height of both #footerContainer and #headerContainer as percentage instead of pixels, as you do the same for others div. In this fiddle I gave 10% to header and footer, and 80% to all intermediante divs.