I want to put 3 div like columns. The one on the left and the one the right have a content and variable length. The one in the middle is a divider.
My CSS is:
html
{
background:url(../img/texture.png) 50% 0 repeat #fff;
}
body
{
font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
position:relative;
min-width:960px;
}
html, body
{
height:100%;
}
.main
{
background-color:#f8f8f8;
padding:2px;
border:1.5px solid #000000;
border-radius:1em;
-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
margin:auto;
width:950px;
box-shadow:0 0 20px #585858;
word-wrap:break-word;
}
section#content
{
padding:10px 0px;
overflow:hidden;
}
section#content #text
{
margin:10px 20px 0px;
text-align:center;
}
#text #login
{
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
text-align:left;
}
#text #registration
{
width:40%;
margin-left:5%;
margin-right:5%;
float:right;
text-align:left;
}
#text #divider_ver
{
float:left;
height:100%;
width:1px;
background:#000000;
}
And my JSP:
<body>
<div class="main">
<section id="content">
<div id="testo">
<div id="text">
<div id="login">
...
</div>
<div id="divider_ver"></div>
<div id="registration">
...
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
</body>
The problem is that the divider won't show up. If I set its height like: min-height:100px; it will, but will have fixed height (100px). I want it to have the height of the taller between the other 2 div, but I can't do it.
http://jsfiddle.net/2mjet/1/
Here:
CSS changes
section#content #text
{
margin:10px 20px 0px;
text-align:center;
overflow: hidden;
}
#text #divider_ver
{
float:left;
padding-bottom: 10000px;
margin-bottom: -10000px;
width:1px;
background:#000000;
}
Simple +padding -margin with overflow:hidden container, but it's nice trick to remember.
Related
If you go to Google Play Store Website,you will notice that the width of the SearchBar at the top changes if you change the window width.
Can someone please give me an example on how I can achieve such variable width behaviour using just HTML and CSS?
CSS
body {
margin:0;
min-width:960px;
}
#upperbar {
background-color:#F1F1F1;
white-space:nowrap;
height:60px;
width:100%;
}
#logobardiv {
margin:10px 20px 10px 30px;
display:inline-block;
}
#logo {
height:39px;
width:183px;
}
#searchbardiv {
font-size:0;
display:inline-block;
height:100%;
padding-left:10px;
vertical-align:middle;
white-space:nowrap;
min-width:200px;
}
#searchbar {
height:28px;
/*max-width:589px;*/
max-width:100%;
width:589px;
min-width:545px;
font-size:16px;
border:1px solid #A8A8A8;
border-right:none;
display:inline-block;
vertical-align:middle;
}
#searchbar:hover {
border:1px solid black;
border-right:none;
}
::-webkit-input-placeholder {
color:#A9A9A9;
padding:0 0 0 7px;
}
#searchbutton {
vertical-align:middle;
background:#4584F0;
height:28px;
width:60px;
display:inline-block;
border:1px solid transparent;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
padding:0;
margin:0;
outline:none;
white-space:nowrap;
}
#searchbuttonimg {
vertical-align:middle;
background:url(images/search.png) no-repeat center;
display:inline-block;
height:100%;
width:26px;
}
#signindiv {
display:inline-block;
height:100%;
white-space:nowrap;
vertical-align:middle;
}
#appsimg {
display:inline-block;
vertical-align:middle;
}
HTML
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
<button id="searchbutton"> <span id="searchbuttonimg"></span>
</button>
</div>
<div id="signindiv">
<img id="appsimg" src="images/apps.png" />
</div>
</div>
</div>
JSFiddle
simple way is you need to set a 3 different width max-width, min-widtht and actual width
like
input{
max-width:100%;
min-width:300px;
width:800px;
}
I used display:flex to achieve the variable length of the elements.
Refer the below link for a good explanation
FlexBox
For some reason my object that is floated right is not displaying the same as the one I'm floating left in Firefox. The one on the right has no margin at the bottom against the footer, and the one on the left has the desired result. Any idea why it does this? Here is my CSS and my HTML:
CSS:
p {
font-family: 'Open Sans', 'sans-serif';
}
#container {
overflow:hidden;
width: 100%;
max-width:960px;
background-color: #FFFFFF;
margin-left:auto;
margin-right:auto;
}
#branding {
width:100%;
height:100px;
background-color:black;
z-align:1000;
}
#logo {
background-image:url("images/google-logo-small.png");
height:69px;
width:200px;
margin:15px 0 0 10px;
float:left;
z-align:1001;
}
#toparea {
font-family: 'Open Sans', 'sans-serif';
margin:20px 0px 20px 0;
float:right;
color:white;
z-align:1001;
}
#toparea ul li {
list-style:none;
display:inline-block;
padding:0 30px 20px 0;
}
#topcontent {
width:100%;
background-color:inherit;
margin:0;
z-align:1000;
}
#blockone {
border-radius: 15px;
width:48%;
height:200px;
background-color:gray;
float:left;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}
#blockone p {
font-family: 'Open Sans', 'sans-serif';
font-size:20px;
color: white;
padding:20px 0 0 20px;
}
#blocktwo {
border-radius: 15px;
width:48%;
height:200px;
float:right;
background-color:gray;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}
#blocktwo p {
font-size:20px;
color: white;
padding:20px 0 0 20px;
}
#footer {
clear:both;
-moz-border-radius: 5px 10px 5px 10px;
border-radius: 15px;
width:100%;
height:200px;
background-color:gray;
border-width:1px;
border-color:black;
}
HTML:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='css/base.css' rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="branding">
<div id="logo"></div>
<div id="toparea">
<ul>
<li>Content</li>
<li>Content2</li>
</ul>
</div>
</div>
<div id="topcontent">
<div id="blockone">
<p>some copy</p>
</div>
<div id="blocktwo">
<p>this is more text</p></div>
</div>
<div id="footer"><p>Some more copy</p></div>
</div>
</div>
</body>
</html>
Margins of sibling elements inside the same element add up. To correct this, replace this...
#blocktwo {
border-radius: 15px;
width:48%;
height:200px;
float:right;
background-color:gray;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}
... with this...
#blocktwo {
border-radius: 15px;
width:48%;
height:200px;
float:right;
background-color:gray;
border-width:1px;
border-color:black;
margin-bottom: 10px; /* <-- this is what I changed */
}
HERE IS A DEMO
You have different margins set for the item you're floating left, and the item you are floating right. You also need to ensure they have the same height if you want them to display lined up with the same margins. Also, Z-Align is not valid CSS.
Try this:
#logo {
background-image:url("images/google-logo-small.png");
height:69px;
width:200px;
margin:15px 0 0 10px;
float:left;
}
#toparea {
font-family: 'Open Sans', 'sans-serif';
height:69px;
margin:15px 0 0 10px;
float:right;
color:white;
}
#toparea {
margin:20px 0px 20px 0;
}
This is your problem. The bottom margin on the navigation div is pushing the content below it. Remove the bottom margin and it will behave as expected.
I need is to show the content of a web page in the center of the browser, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the center of the browser.
Thanks in advance
My Html and css code is below
HTML code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="basic1.css"/>
</head>
<body>
<div id="menu">
<img class="imgc" src="img.png" alt="icon"/>
<img class="imgd" src="do.png" alt="do"/>
</div>
<div id="smenu"></div>
<div id="mainbox">
<div class="ibox"></div>
</div>
<div id="menutext">
<ul>
<li><b>???????</b></li>
<li><b>?????</b></li>
<li><b>?????</b></li>
</ul>
</div>
<div id="py">
<pre class="p">??<span style="color:black;font-size:25px">??????</span></pre>
<pre class="s">?? ???? ??? ??? <span style="color:#980000;
letter-spacing :+1mm"><b>:3</b></span></pre>
</div>
</body>
</html>
CSS
#menu img.imgc {
position:absolute;
right:77%;
top:10px;
margin:0px auto;
}
#menu img.imgd {
position:absolute;
left:75%;
top:10px;
margin:0px auto;
}
#menu {
position:absolute;
left:0%;
top:0%;
right:0%;
right:0%;
width:100%;
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
#mainbox div.ibox{
position:absolute;
left:31%;
top:20px;
border-left:3px solid gray;
height:105px;
margin:0px auto;
}
#menutext ul{
position:absolute;
right:72%;
top:15px;
list-style: none;
line-height:30px;
margin:0px auto;
}
#menutext a{
font-size:12px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
color:black;
text-decoration: none;
text-align: left;
}
#py pre.p{
position:absolute;
top:15px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +2mm;
font-size:50px;
color:#009933;
text-decoration: none;
text-align: center;
margin:0px auto;
}
#py pre.s{
position:absolute;
top:67px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +3mm;
font-size:12px;
color:gray;
text-decoration: none;
text-align: center;
margin:0px auto;
}
Put all the content inside a div, set its class to container:
<div class="container">
...
</div>
Then using css set its margins to auto:
.container{
margin:0px auto;
width: 600px;
}
have a look at this jsfiddle
EDIT
check this new fiddle , the menu css doesn't neet all of what you wrote, should be something like:
#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
Put all your page content inside a wrapper div, then give it some relative width (e.g. 50%) and auto horizontal margins.
<div id="wrapper">
<!-- CONTENT GOES HERE -->
</div>
CSS (50% page width, zero top/bottom margin):
#wrapper {
width: 50%;
margin: 0 auto;
}
Put another div around all of your content (so from right after your body start tag and just before body end tag). Call it <div class="container">
Set the following style to that div:
width: 1000px;
margin: auto;
This should center your content.
You can change the width as needed.
You could use fundation3's grid: http://foundation.zurb.com/docs/grid.php
Working solution.
<html>
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
</html>
hi all I have html code like this
<html>
<head>
<style type="text/css">
body {
font-family:arial,helvetica,sans-serif;
font-size:12px; background-color: blue;
}
**#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px; background-color: pink;
}**
#header
{
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content
{
margin-top:10px;
padding-bottom:10px;
}
#content div
{
padding:10px;
border:1px solid #bbb;
float:left;
}
**#images
{
position:relative;
top:0px;
}**
#content-left
{
width:380px;
}
**#content-right
{
position:relative;
top:0px;
margin-left:10px;
width:534px;
}**
#footer
{
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom
{
clear:both;
text-align:right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-left"></div>
**<div id="content-right"><div id="images"><img src="pics02.jpg"
width="300px;height="900px" /></div>**
</div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
</body>
</html>
I have a problem like if i insert some content in content right and if the content is more than the width of content right first content right should expand then wrapper should expand but this is not happening over there and is coming out of the wrapper. Can anyone guide me how to proceed.
you have fixed the width of the content-right. so it wont! it may adjust the height but it wont adjust width..you could use the min-width property to set the minimum width of the content-right...
http://www.w3schools.com/cssref/pr_dim_min-width.asp
I have this code :
<div class="ultime_box">
<div class="ultime_box_photo">
Photo
</div>
<div class="ultime_text">
<div class="ultime_box_title">
Title
</div>
<div class="ultime_box_description">
Description
</div>
link
</div>
<div class="clear"><!--- --></div>
</div>
.ultime_box
{
margin:15px 27px 35px 20px;
color:#FFFFFF;
font-size:13px;
height:100px;
background-color:#cdcccc;
}
.ultime_box_photo
{
width:120px;
margin-right:15px;
float:left;
}
.ultime_text
{
float:left;
width:299px;
}
.ultime_box_title
{
color:#000000;
font-weight:bold;
font-size:12px;
text-transform:uppercase;
line-height:12px;
padding-bottom:13px;
}
.ultime_box_description
{
color:#FFFFFF;
font-size:11px;
line-height:13px;
padding-bottom:13px;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
}
a.ultime_box_vai:hover
{
text-decoration:underline;
}
And I'd like to put the link in the bottom of the container div (ultime_box), without using height in the previous divs.
How can I do this?
Here's the solution: http://jsfiddle.net/N7GWV/1/
Give .ultime_box position: relative and your link position: absolute; bottom: 0.
.ultime_box
{
margin:15px 27px 35px 20px;
color:#FFFFFF;
font-size:13px;
height:100px;
background-color:#cdcccc;
position: relative;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
position: absolute;
bottom: 0;
}
.ultime_text
{
float:left;
width:299px;
position:relative;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
position:absolute;
bottom:0px;
}
this should do what you need. Basically, it's all depending on the position attribute of the divs.
This quick guide should clean you out about it.
You could make your bottom link have this css:
a.bottomLink{
float:left;
width:100%;
}
As your container div height is dynamic (based on content), your bottom link will be on the bottom. If I understood, you want to place link on the bottom of ultime_box, so your html should look like:
<div class="ultime_box">
<div class="ultime_box_photo">
Photo
</div>
<div class="ultime_text">
<div class="ultime_box_title">
Title
</div>
<div class="ultime_box_description">
Description
</div>
link
</div>
<div class="clear"><!--- --></div>
bottom
</div>