I'm trying to create the following layout using CSS:
Gray Rectangle = Container
Blue Rectangle = Image
White Rectangle = Content
Unfortunately the best I've been able to manage is this:
I have two problems with the content div:
How to make the content div sit to the right of the image without hard coding the width.
How to make the content div expand vertically to fill the container.
Apologies if a similar question has already been asked. I've read similar questions here but they all seem to relate to other layout concerns.
HTML:
<html>
<head>
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="solid">
<img id="snapshot" src="page.jpg">
<div class="content" style="margin-left: 165px;">
Test
</div>
<br style="clear:both"/>
</div>
</body>
</html>
CSS:
#snapshot {
float: left;
}
div.solid {
padding: 5px;
border: 1px solid black;
background-color: #E8E8FF;
}
div.content {
border: 1px solid black;
background-color: #FFFFFF;
}
If you know the width of the image, you can do something like this: http://jsfiddle.net/EeLjd/
Use position: absolute on the content, and set the left to the width of the image, plus the padding. Use float: left on the image.
Equal height columns are always a pain. If the image width is fixed, perhaps the easiest way is to put the image inside the content div and then push it back to the left with a negative margin:
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="solid">
<div class="content" style="margin-left: 165px">
<img id="snapshot" src="page.jpg" style="margin-left: -165px;">
Test
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
Related
How can I use multiple colors for my website?
I am using gradient colors for the header, it looks like ![this][1] I want to also show the card columns at the middle of the site, and the background should go white, how can I accomplish that?
I tried to do style a div
.testdiv {
background: #ffffff;
}
But that only changes the div background, which looks like ![this][2]
Edit: My full code for the issue.
<section class="bottom-articles">
<article class="bottom-article">
<img class="article-image" src="/images/layer-2.jpg">
<div class="article-text-wrapper">
<h3 class="article-title">Issue 1</h3>
<div class="article-description">
</div>
</div>
</article>
And for styling, I came up with something like
.bottom-article {
padding-top: 40px;
float:right;
margin-right: 300px;
padding-right: 80%;
}
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:orange;}
#p1 {background-color:transparent;}
#p2 {background-color:#ffffff;}
</style>
</head>
<body>
<p>HEX colors:</p>
<p id="p1">transparent</p>
<p id="p2">white</p>
</body>
</html>
try doing
.testdiv {
background-color: transparent;
}
I am trying to style the layout I will use as a template for my site and after a lot of reading I came up with this:
HTML:
<body>
<link rel="stylesheet" type="text/css" href="style/login.css" />
<div id="wrapper">
<div id="header">
Header
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
</body>
CSS:
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
#header{
height: 100px;
width: 100%;
}
#main{
height: 100%;
width: 100%;
}
#footer{
width: 100%;
height: 50px;
text-align: center;
position: relative;
}
Seems to be working but for some reason the wrapper and the main div seem to take the exact same height and this makes the page grow larger than the window and scrolling down is needed to see the footer.
I tried a lot of stuff to fix this including CSS absolute positioning and I have been using different browsers to test it.
Any Ideas?
it is because you set height:100%; in your #main set is to 100px or something else and it will work
I would really like to suggest you look at using something like bootstrap grid..
It will make you layout life so much easier across all browsers..
you just create a container with rows, and add divs with certain spans in them and it aligns everything perfect.
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div class="container">
<div class="row" id="header">
</div>
<div class="row" id="body">
</div>
<div class="row" id="footer">
</div>
</div>
done :)
Further reading, takes like 10-15 min to figure out, then say goodbye to css nightmare..
http://www.revillwebdesign.com/twitter-bootstrap-tutorial/
http://twitter.github.io/bootstrap/scaffolding.html
First, put the link tag in the head section of the HTML document not in the body section.
As far as the css, I would not set heights on elements. Instead, only set the height if absolutely necessary. Let the content, padding and margin push the footer down to the appropriate height.
I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:
Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.
I put together the following simplified version:
<html>
<head>
<style type="text/css">
.panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; }
.header { border-bottom: 1px solid black; }
.scroll { max-height: 100%; overflow: auto; }
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail
Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }
(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).
Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.
Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:
overflow-y:scroll;
on the "scroll" div instead of
overflow:auto?
Let me know
Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for
<html>
<head>
<style type="text/css">
.panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; display:block;}
.header { border-bottom: 1px solid black; }
.scroll { height: 10%;overflow-y: scroll; display:block; }
.scroll div {display:block; line-height:normal; clear:both; height:20px;}
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
Messy headline, but i had no other way to descibe it.
what im trying to do is i have 3 boex in a line with only 1 px border at each side, but cant get it to work, it is always 2 px at the far right one. How to solve this?
Check the code:
#content {
width: 1016px;
min-height: 664px;
height: auto;
border: 1px solid #232323;
background-color: #12100e;
float: left;
padding: 0px;
}
#imagebox {
Width: 338px;
height: 221px;
padding-right: 0px;
padding-left: 0px;
border-right: 1px solid #232323;
border-bottom: 1px solid #232323;
}
<html>
<head>
<link rel="StyleSheet" href="Main.css" type="text/css">
<title></title>
</head>
<body>
<div id="mainbody">
<div id="menu"></div>
<div id="content">
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
</div>
</div>
</body>
</html>
It's because the right-hand border add's 1px to the overall width of the #imagebox element, thus making the width 339px.
Try decreasing the width to 337px and they should all fit in
Closest you can get:
http://jsfiddle.net/CGEWC/2/
Several thing you have to keep in mind:
Use classes in stead of id's if you need to assign a style multiple times.
In your CSS you use Width with a capital. Although CSS is not case sensitive it's cleaner to just write it all lowercase.
I've added a float: left; to your imageboxes
I've added first and last classes to your div. Not the cleanest code, but it should word.
Have you tried using max-width instead of width? It allows the object to be scaled down.
If need be just take 1 away from either and it should be fine and change the id's to class as they are all the same.
I have two divs inside a div, I want them both adjacent to each other with a margin of 10px or so separating them but instead they appear one above the other.
<div>
<div class="post" id="fact">
</div>
<div class="post" id="sortbar">
</div>
</div>
Here is my styling:
#fact{width:200px; margin-left:auto; margin-right:auto;} #sortbar{margin-left:auto; margin-right:auto;}
The whole code is within a div container wrapper with these properties:
#wrapper {
float:left;
margin-top:10px;
width:728px;
}
You have two options (choose one or the other but not both).
set float: left; on both #fact and #sortbar
set display: inline-block; on both #fact and #sortbar
The second option is better because you don't have to fix the clearing and such, as well as the fact that inline-block works a lot better layout-wise than left floating.
See this working example. You can copy and paste this HTML & CSS and try it out.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS styling - how to put these two div boxes adjacent</title>
<style type="text/css">
.wrapper .post {
-moz-border-radius:7px 7px 7px 7px;
border:1px solid silver;
float:left;
margin:10px;
min-height:100px;
padding:5px;
width:200px;
}
</style>
</head>
<body>
<h4>CSS styling - how to put these two div boxes adjacent</h4>
<div class="wrapper">
<div class="post">
<div>
Browse (Google)
</div>
<div>
This is a Div
</div>
<div>
This is a Div
</div>
<div>
This is a Div
</div>
</div>
<div class="post">
<div>
Browse (Wikepedia)
</div>
<div>
This is another Div
</div>
<div>
<div>
This is another Div
</div>
<div>
This is another Div
</div>
</div>
</div>
</body>
</html>
Something like this should do it...
#fact {
width:200px;
float: left;
margin: 0 10px 0 0;
}
#sortbar {
float: left;
}
Add float:left;:
#fact, #sortbar{
float:left;
margin-left:10px;
}
See the working demo here.
Essentially your #fact and #sortbar divs still have the default 'block' display type which, in simple terms, will put your divs in their own horizontal space. The other answers here show how to use "float" to solve your issue.
Here's some linkage for you:
box model: http://www.w3.org/TR/CSS2/box.html
display css property: http://www.w3schools.com/css/pr_class_display.asp
float tutorial: http://css.maxdesign.com.au/floatutorial/
Dan