I have a page set up like this:
HTML:
<div id="wrapper">
<div id="right">
...
</div>
<div id="left">
<div id="top">...</div>
<div id="bottom">...</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
width: 400px;
}
#wrapper #right {
position: relative;
float: left;
width: 400px;
border: 1px solid black;
}
#wrapper #left {
position: fixed;
float: left;
width: 200px
top: 150px;
margin-left: -230px;
border: 1px solid black;
}
#wrapper #left #top {
float: left;
border: 1px solid black;
margin-bottom: 20px;
}
#wrapper #left #bottom {
float: left;
border: 1px solid black;
}
For some reason the bottom div inside the left div isn't showing up. Any explanation as to why it's not showing up? And is there a solution? Thanks in advance!
When you use float:left;, the <div> will not take up space, so the bottom <div> is behind the top div. To fix this problem, get take out float:left; from the top <div>.
It's showing. Check http://codepen.io/anon/pen/pzqoi
#wrapper {background:#f4f4f4; height:960px;}
#right{background:#f4f4f4; border:1px solid #ccc; float:right;}
#left {background:#f4f4f4; border:1px solid #ccc; float:left; padding:10px;}
#top {background:#f4f4f4; border:1px solid #ccc;margin-bottom:5px;}
#bottom {background:#f4f4f4; border:1px solid #ccc; clear:both;}
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 stuck here with an easy css problem:
The problem is to align "World" text inside the div element at the bottom right.
Here is a fiddle:
http://fiddle.jshell.net/0p6w3x14/2/
<div id="container">
<div id="tableElement">
<table> <!-- this table needs to be here, it's containing more info -->
<tr>
<td>
Hello
</td>
</tr>
</table>
</div>
<div id="element">
World
</div>
</div>
#container
{
width: 200px;
border: 1px solid black;
}
#tableElement
{
border: 1px solid black;
display: inline-block;
}
table
{
border: 1px solid red;
height: 100px;
}
#element
{
display: inline-block;
float: right;
border: 1px solid green;
}
Update your css like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // add this line
}
#element
{
display: inline-block;
position:absolute; //add this line
bottom:0; //add this line
right:0; //add this line
border: 1px solid green;
}
and remove float:right
Working fiddle here
Check this Fiddle.
I didn't use
float: right
and
display: inline-block
But instead I set a defined width, set its Left property to 100% and then use margin to adapt it to the container
#element{
width: 45px;
top:100%;
left: 100%;
margin-left: -45px;
}
This could be simply done by giving #element the styles position:absolute;, bottom:0; and right:0. And then giving #container the style position:relative; like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // Parent needs relative positioning if child will have absolute positioning
}
#element
{
border: 1px solid green;
position:absolute;
bottom:0;
right:0;
}
JSFiddle Demo
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>
I have a wrapper div and a content div.
<style type="text/css">
#wrapper {
width: 500px;
border: 1px solid red;
overflow: auto;
}
#content {
border: 1px solid blue;
}
.column {
display: inline-block;
width: 300px;
}
</style>
<div id="wrapper">
<div id="content">
<div class="column">hello</div>
<div class="column">world</div>
</div>
</div>
The columns appear on two rows instead of the same row. If I style then with display: table-cell they each take up 50% of the width, but still won't expand the content beyond the wrapper's width.
How do I make the content div expand to fit both columns on the same row and cause scrolling on the wrapper div?
if you change you styles to the following you will achieve what you want:
#wrapper {
width: 500px;
border: 1px solid red;
overflow: auto;
}
#content {
display: inline-block;
border: 1px solid blue;
white-space:nowrap;
}
.column {
vertical-align:top;
display: inline-block;
width: 300px;
white-space:normal;
}
Example
Ohh I think I see the problem now, try:
#wrapper {
width: 500px;
border: 1px solid red;
overflow: auto;
}
#content {
white-space:nowrap;
border: 1px solid blue;
}
.column {
display: inline-block;
width: 300px;
}
http://jsfiddle.net/krowe/z3TS8/
In .column if you use display:table-cell, the column will be aligned in the same row as you need. And its working fine for me. Hope this is what you are looking for JSFiddle
#wrapper {
width: 500px;
border: 1px solid red;
overflow: auto;
display:table;
}
#content {
overflow: hidden;
display:table-row;
}
.column {
width:50%;
border: 1px solid blue;
display:table-cell;
}
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/