I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }
Related
In bootstrap, I have divided my screen into two rows where 1 row has 62% and the other has remaining.
<style>
.full-image
{
height:62%;
}
</style>
<body
<div class="row full-image">
<div class="col-md-12">
<img src=".." style="overflow:hidden">
</div>
</div>
<div>
....
</div>
</body>
Now my image in row1 is getting overflow and hiding row2. Can someone help me out on this.
https://codepen.io/toastEater/pen/RxQEoj
<style>
.full-image{
height:62vh;
overflow: hidden;
}
</style>
<body>
<div class="row full-image">
<div class="col-md-12">
<img src="https://i.imgur.com/YWbnI93.jpg">
</div>
</div>
<div>
Anything here
</div>
</body>
I'm designing a website and I need it to look something like this http://www.spookycraft.net/
excluding the slide show and javascript and such, I just need 4 separate clickable blocks in the middle of a webpage, I've tried to use margin:auto and then re-position it using margin-left and margin-bottom ect but when I use margin-bottom It just splits apart more and acts rather interestingly here's my current code keep in mind I also need it to look the same on a higher resolution screen which is why I was attempting to use margin:auto;
<!DOCTYPE HTML>
<html>
<head>
<table border="10px"; class="head">
<tr>
<td>
<img src="http://www3.alcatel-lucent.com/partners/hp/data-center-network-connect/images/Alliance_DCNC_700x200.jpg" > </>
</td>
<tr>
</table>
<style media="screen" type="text/css">
.tone{
margin:auto;
}
.ttwo{
margin:auto;
}
.tthree{
margin:auto;
}
.tfour{
margin:auto;
}
.head{
margin:auto;
}
</style>
</head>
<body>
<table border="5px"; class="tone">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px"; class="ttwo">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tthree">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tfour">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
</body>
</html>
Any help would be appreciated! I'll be working to find a answer to my problem, and when I do I'll update this thread.
Don't use tables, they are a no-no in my books. Tables should not be used for structure in a HTML page these days, they should only be used for presenting data in a tabular format. Just use <div>s with a master wrapper <div> around them. Something like this is perfect:
HTML:
<div class="container">
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
</div>
CSS:
body{
margin:0;
padding:0;
}
.container{
overflow:hidden;
width:450px;
margin:0px auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
}
.spacing{
margin-right:20px;
}
Demo here: http://jsfiddle.net/aRSNh/172/
I'm not familiar with table design, but if you want to build it with div I have my code here
<div class="container">
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
</div>
with this css
.container {
width: 680px;
margin: 10px auto;
}
.box {
float: left;
margin: 20px;
}
A nice library for fast CSS development is Twitter bootstrap http://twitter.github.io/bootstrap/index.html
Here is a quick example using bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Layout Demo</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap- combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="margin: 100px 0px; 0px; 0px;">
<div class="row">
<div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
<div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
</div>
<br>
<div class="row">
<div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
<div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
</div>
</div>
</body>
</html>
Plunker: http://embed.plnkr.co/iKgsmZ/preview
This question has actually came from my experiments with GWT framework but I decided to simplify the question.
I'm trying to replace table tag with divs. How can I horizontally align two DIV tags that contain two vertically aligned DIV tags ?
Here is what I have:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
It's rendered in my Chrome 15.0.874.106 m as:
Name:
Address:
test1
test2
where I expected it to be:
Name: test1
Address: test2
Could you please help me ?
HTML tables are appropriate for representing tabular data. Just don't use tables for general layout. Tables are still better for tabular data though.
UPDATE: Going forward, you may want to consult the CSS3 Grid Layout specification: http://www.w3.org/TR/css3-grid-layout/
But as is, if you reeeeeeally want to make it work for whatever reason, I'd set all columns as fixed width, float left and clear on the first column. If you want different widths for different columns, you can make specific classes for those columns and set a specific width. But, if there's user data in your table, you have to make sure overflow:hidden is on, or it'll break your table.
I've pasted the code in here, but I've also created a jsfiddle link.
Here's the html:
<div class="table">
<div class="column first">Name:</div>
<div class="column">test1</div>
<div class="column first">Address:</div>
<div class="column">test2</div>
</div>
And the styles:
.table .column{
width: 100px;
float: left;
}
.table .column.first{
clear: left;
}
However, you're going to run into problems as the text inside the table changes. It's not going to act like a table. For example, when a cell's text wraps to the next line, it's not going to adjust the height of all the cells in that row, as you would expect a cell to do. Hence the overflow: hidden or just use an HTML table.
Hope that helps...
I think for the example you have an actual table would be more appropriate, however; you could also do something like this:
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">Name:</div>
<div style="display: table-cell;">test1</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">Address:</div>
<div style="display: table-cell;">test2</div>
</div>
</div>
</body>
CSS3 has just the ticket:
.tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}
<div class="tabl">
<div class="row">
<div class="cell"> CELL one</div>
<div class="cell"> CELL two</div>
<div class="cell"> CELL three</div></div>
<div class="row">
<div class="cell"> CELL four
</div><div class="cell"> CELL five</div>
<div class="cell">
<div class="tabl">
<div class="row">
<div class="cell">CELL 6A</div>
<div class="cell">CELL6B</div>
</div>
</div>
</div>
</div>
</div>
That can then be allied to a structure that looks like a table In this case I've included a nested table:
If you want you can probably leave out the outside wrapper, unlike a real table the rows and cells seem not to need it. Unfortunately this only works in modern browsers that support CSS3 that leaves out IE including IE9.
<div style="display: block; ">
<div style="float:left">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
<div style="clear:both"></div>
</div>
your solution is as follow :-
PLease check it
<style type="text/css">
.Table
{
display: table;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
}
</style>
<!doctypehtml>
<html>
<body>
<div class="Row">
<div class="Cell">
<p>Name:</p>
</div>
<div class="Cell">
<p>Test1</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Address:</p>
</div>
<div class="Cell">
<p>Test2</p>
</div>
</div>
</body>
</html>
If you are looking to generate dynamic tabular structure, try using jqGrid (demo)
Or if your purpose is different and still wanna go with div? Try this..
use float:left; instead display:inline. Float shrinks the div to its content size, letting space for other elements. This makes other elements accommodate beside floated element.
Corrected code:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="float:left; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left;">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Moe's way is pretty cool but it's not standard.
This is the best way.
Use CSS command "float" just like this:
HTML Code:
.gwt-Label
{
float: left;
width: 50%
}
<!doctype html>
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Or you can have it all in one place:
<!doctype html>
<html>
<head>
<style type="text/css">
.gwt-Label{
float: left;
width: 50%
}
</style>
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
I have the following html code:
<html>
<body style="margin:0px; padding:0px;">
<div id="outer" style="height:100%;">
<div id="header" style="height:40px; background:blue;">Header</div>
<div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
<p style="height:1000px">Main</p>
</div>
</div>
</body>
</html>
I only want the vertical scroll to appear on the main div when the content within it exceeds the viewable area, it seems the margin-bottom on the main div is not working.
Can anyone help me with this issue?
You seem to be solving the wrong problem, actually. If you just want to get rid of the scroll bar for the body itself, set body's style to overflow:hidden.
<html>
<body style="margin:0px; padding:0px;overflow:hidden;">
<div id="outer" style="height:100%;">
<div id="header" style="height:40px; background:blue;">Header</div>
<div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
<p style="height:1000px">Main</p>
</div>
</div>
</body>
</html>
This should resolve the margin issue, and then all you have to do is keep the sizes right.
I'm trying to get a bunch of div's to wrap around an image, but am failing.
Since pasting HTML doesn't seem to work in StackOverFlow, here is my current attempt at emulating a Outlook 2010 contact entry.
Source from: http://www.perfmon.com/download/contactdivtest.htm
(edit: or check out #Hristo's cool online editor )
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</body>
</html>
Can anyone tell me what I need to do to make all the div's move up and wrap around the image? I really hope I'm not missing something simple...
Here is the target layout I'm attempting:
alt text http://perfmon.com/download/contactdivtest.bmp
foor your specific solution span can work better for you:
check the version with span:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
.contactLarge span{
font-weight: bold;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<span>LastName, Firstname</span> <br />
<span>CompanyName</span> <br />
<span >Title</span> <br>
<span >Work#</span> <br>
<span >Mobile#</span> <br>
<span >Home</span> <br>
<span >email1</span> <br>
<span >email2</span> <br>
<span >email3</span> <br>
<span >Street</span> <br>
<span style="background-color:#F1F5F9; float:left;" >City,</span> <br>
<span style="background-color:#F1F5F9; float:left;" >State</span> <br>
<span style="background-color:#F1F5F9;" >Zip</span> <br>
<span style="background-color:#F1F5F9;" >httppage</span> <br>
<span style="background-color:#F1F5F9; ">im</span> <br>
</div>
</body>
</html>
Div is a block-level element. It will take up full width and generate a break before and after.
Img is, by default, an inline element. You want to wrap it in another one (not float). Either use span's instead (span is div's inline brother) or set the css display property to inline on the div.
A very useful trick for these sorts of things is the "display: inline-block".
It displays things inline (so the wrapping will work), but leaves you with almost the full configurability of a block-level element.
A <div> is a block level element - this means that it automatically clears to a new line and has 100% width. Without seeing your html or css it's hard to see where you're going wrong but try using float:
div {
float: right;
width: 50%;
}
Edit:
Now that you've posted a picture of what you want I can say that you'll probably want something like this:
HTML:
<div id="container">
<img src="foo.jpg" />
<div id="content">
<p>Blah blah</p>
<p>More blah blah</p>
</div>
</div>
CSS:
#content {
width: 60%;
float: right;
}
Just make sure that the width of the img + width of the inner div is less than the width of the containing div.
If you create a "textbox" div around your text and float it left you should be good to go. See:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.textbox {
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
<div class="textbox">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</div>
</body>
</html>