I've the below html code.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margins">
<head>
<meta charset="utf-8" />
<style type="text/css">
.main {
width: 900px;
height: 320px;
border: 1px solid black;
position:relative;
}
.margins {
padding:10px 10px 10px 10px;
border: 1px solid black;
}
.top_H {
width: 720px;
height: 80px;
border: 1px solid black;
}
.mid {
display: inline-block;
clear: both;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid black;
}
.mid_L {
width: 200px;
height: 120px;
float: left;
margin-right:10px;
border: 1px solid black;
}
.mid_C {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
margin-right:10px;
}
.mid_R {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
}
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px;
border: 1px solid black;
}
.bot_L {
width: 450px;
height: 80px;
float:left;
border: 1px solid black;
}
.bot_R {
width: 200px;
height: 80px;
float: left;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="margins">
<div class="top_H"></div>
<div class="mid">
<div class="mid_L"></div>
<div class="mid_C"></div>
<div class="mid_R"></div>
</div>
<div class="bot">
<div class="bot_L"></div>
<div class="bot_R""></div>
</div>
</div>
</div>
</body>
</html>
here i am trying to create a container div(margins) inside the main div, with the gap of 10 px on each side, but when i view it in web browser it is overlapped. please let me know where am i going wrong.
Here is the fiddle.
Thanks
Offcourse it is overlapping. in your .main class you have set a height, and it's not high enough. also, if you want to be absolutely sure that nothing goes over your div, set an overflow in the css !
make height of main div auto :
.main {
width: 900px;
height: auto;
border: 1px solid black;
position:relative;
}
DEMO : http://jsfiddle.net/V9N3u/2/
Now define your .main min-height and remove height
as like this
.main {
height: 320px; // remove this
min-height: 320px; // add this
}
try this
min-height for .main class
.main {
width: 900px;
min-height: 320px;
border: 1px solid black;
position:relative;
}
The others are right about the height.
You may also want to remove the margin-bottom of .bot to get rid of the extra spacing (unless that's on purpose):
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px; //remove
border: 1px solid black;
}
And you also have one too many " in your html:
<body>
...
<div class="bot_R""></div>
Related
I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.
CODE
#alpha {
position: relative;
padding-top: 4px;
margin-top: 8px;
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
}
#alpha1 {
position: relative;
width: 94px;
height: 94px;
border: 1px solid black;
margin-left: 2%;
}
#alpha2 {
position: relative;
margin-top: 0px;
height: 40px;
border-top: 1px;
border-bottom: 1px solid black;
margin-left: 94px;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="img/jenny.jpg" width="94px" height="94px">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size
Don't use HTML width/height tags, instead use CSS for styling it.
Note I did a few tweaks to your code.
#alpha {
padding-top: 4px;
margin: 8px 2% 0;
width: 96%;
height: 100px;
border: solid black;
border-width: 1px 0;
display: flex
}
#alpha1 {
width: 94px;
height: 94px;
border: 1px solid black;
margin: 0 2%;
}
#alpha2 {
flex: 1
}
#alpha2 h1 {
border-bottom: 1px solid black;
height: 40px
}
<div id="alpha">
<div id="alpha1">
<img src="//lorempixel.com/94/94" />
</div>
<div id="alpha2">
<h1 id="patientname">Jenny Thomas</h1>
</div>
</div>
The easiest/fastest solution is to assign display: flex to the container #alpha
http://codepen.io/anon/pen/mPgaJP
(I also erased some unneccesary settings in there)
You just needed to set the float property of your div. Here you are :-
#alpha{
position:relative;
padding-top:4px;
margin-top:8px;
margin-left:2%;
margin-right:2%;
width:96%;
height:100px;
border-top:1px solid black;
border-bottom:1px solid black;
float: none;
}
#alpha1{
position:relative;
width:94px;
height:94px;
border:1px solid black;
margin-left:2%;
margin-right: 0px;
float: left;
}
#alpha2{
position:relative;
margin-top:0px;
height:40px;
border-top:1px;
border-bottom:1px solid black;
margin-left:9%;
float: next;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here. Mark the problem solved if it helps.
I'm trying to set a simple page grid. Each row consists of an optional left column, plus a main content right column. I want the right column to remain the same size at the same position even if the left column isn't present.
I figured that floating the left column and using position: relative with left: on the right column would give me the behaviour I want.
My HTML looks like this:
<div class="row">
<div class="sidebar">I'm a sidebar!</div>
<div class="main">
<p>I'm main!</p>
</div>
</div>
and my CSS looks like this:
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Here's a fiddle: http://jsfiddle.net/ttr5k/1/
To my surprise, the content of .main is shifted right (as if .main had padding-left) seemingly due to the sidebar. Why is this, and how could I solve it?
I also suspect this isn't the best way to build a grid, is there a better approach?
Add position absolute instead of relative
http://jsfiddle.net/ttr5k/2/
As you can see the text aligns left again
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}
I recommend doing something like this:
.row {
background:#eee;
width:90%;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:left
width: 500px;
border: 1px solid green;
overflow:auto;
clear:right;
}
Now you will be able to remove the sidebar whenever you want without adding new CSS
DEMO: http://jsfiddle.net/ttr5k/5/
OR------
if you want that space even if no sidebar and still want to content to overflow:
http://jsfiddle.net/ttr5k/7/
.row {
background:#eee;
width:600px;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:right;
width: 396px; /* This is due to box-model adding border as width */
border: 1px solid green;
overflow:auto;
clear:right;
}
Here is the FIDDLE on how I would do it: http://jsfiddle.net/mikea80/zJa5P/
<div class="row">
<div class="main">
<p>I'm main!</p>
</div>
<div class="sidebar"><p>I'm a sidebar!</p></div>
</div>
.row {
margin: 0 auto;
width:704px;
clear:both;
}
.main {
display:inline-block;
float:right;
width: 500px;
border: 1px solid green;
}
.sidebar {
display:inline-block;
float: right;
width: 200px;
border: 1px solid red;
}
With the row being 700px this code will center it
You have to add position absolute to sidebar class.
CSS:
.sidebar {
position: absolute;
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Trust me, this way, you can add other row class without any problem. Here is the FIDDLE:
http://jsfiddle.net/asubanovsky/bVr6r/
I have this code:
<header>
<div id="logo">
<img src="img.png" width="288px" height="80px"/>
</div>
</header>
And this CSS:
header { width: 960px; height: 100px; padding: 10px; }
#logo { float: left; height: 100%; border: 1px solid #000; }
#logo img { border: 1px solid #000; }
How to centralize vertically the img element in this div? I have use the display table, and table cell, but not work.
#logo { height: 100%; border: 1px solid #000; text-align:center; }
-------^^^^^^^^^^^^^^^^^^---
also remove the float
Live Demo
Use this tag text-align: center ; from the CSS for the image to the CSS for its parent div, so your CSS looks like this:
.box {
height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align:center
}
.box img {
height: 100%;
width: auto;
}
Just Replace Your CSS like this.
http://jsfiddle.net/lvtrvd/29uGQ/
header { width: 400px; height: 100px; padding: 10px; }
#logomark { height: 100%; border: 1px solid #000;position: relative;}
#logomark img { border: 1px solid #000; position: absolute;top:0;
bottom:0;left:0;right:0; margin:auto;}
I'm trying to align a table of dynamic size within a parent div. The parent container's height is set, and the inner table's height is unknown (variable). I don't think margins/relative positioning adjustments will work since the size of the table is unknown. Can this be done? Right now the code looks like:
html:
<div id="wrapper">
<div id="board">
<table id="evolve">...</table>
</div>
</div>
css:
#wrapper {
width: 100%;
height: 100%;
}
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
margin: auto;
position: relative;
}
Your desired css code
#board {
display:table-cell;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border:solid 1px black;
}
UPDATE
You will need to alter padding-left depending on wrapper width(if you set it to 100% then it will work)
#wrapper {
height: 100%;
padding-left:36%;
}
#board {
display:table-cell;
width: 265px;
height: 222px;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
}
As soon as i find a better solution i will update it
You can define line-height same as the height of the DIV. Write like this:
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
line-height:222px;
}
#board .evolve {
border: 1px black solid;
margin: auto;
position: relative;
line-height:1.5;
}
Check this http://jsfiddle.net/X4L5A/1/
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.