This is for an intro to web design course. We're expected to mimic a layout.
I am using inline-block to get the two columns side by side and I'm pleased with the results except for some space to the right of the black main div. I can't figure out why the parent div is not shrinking to fit the inline-block divs.
Layout with error
I've never used jsfiddle before but this is what I believe is a correct jsfiddle with my html/css code:
https://jsfiddle.net/j8jpqm9p/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
a:link{
color:#008000;
font-size:1.15em;
font-weight:bold;
}
a:hover{
color:#ccffcc;
font-weight:bold;
font-size:1.15em;
text-decoration:underline;
}
body{
background-color:gray;
}
.container{
overflow:hidden;
border-width:2px;
border-style:solid;
border-color:blue;
border-radius:25px 25px 25px 25px;
}
.topcont{
padding:10px 0px 25px 25px;
background-color:white;
}
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
min-width:200px;
max-width:300px;
background-color:green;
margin:0px;
height: 700px;
}
.maincont{
text-align:center;
display:inline-block;
width:1000px;
background-color:black;
color:white;
height:700px;
margin:0px;
}
.bottomcont{
background-color:white;
padding: 0px 0px 25px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="topcont">
<a href="http://www4.uwm.edu/" target="_blank" >Link One</a> |
<a href="http://www.uwgb.edu/" target="_blank" >Link Two</a> |
<a href="http://www.uwosh.edu/" target="_blank" >Link Three</a> |
<a href="http://www.wisc.edu/" target="_blank" >Link Four</a> |
<a href="http://www.uwec.edu/" target="_blank" >Link Five</a>
</div>
<div class="sidecont">The sidebar
</div><div class="maincont"> Main content of the page goes in this container
</div>
<div class="bottomcont">Contact information
</div>
</div>
</body>
</html>
I tried to post a link to the layout I'm expected to copy but I'm limited to two links due to my rep. It's basically exactly the same, sans the grey space/third column on the right of the black main container.
Thanks in advance for your help.
Edit to add:
Whatever is causing the parent div (container) to be that large it does not appear to be the topcont or bottomcont divs. I can set those both to width of 50% and they shrink appropriately but the main container div stays as large as it is.
I can manually set the container div down a few % points and minimize the gray gap, but it doesn't go away.
Is there some explicit command to force the container div to shrink to fit it's child divs?
The issue is that your .container is not an inline-block but a block element. And a block element will not wrap around the content, but will always fill the entire available width.
To solve your problem, you can add the following line to .container.
display: inline-block;
Here is the corrected fiddle: https://jsfiddle.net/j8jpqm9p/11/
This will make your container an inline-block as well and make it wrap around the content.
I'm not sure why you are using min-width and max-width though. This will make the total width of your site dependend on the content in your sidecontainer. Your site width will be somewhere between 1200px and 1300px, depending on what you put in .sidecont
Usually you'd want your container to have a fixed width and not change depending on the content inside of it.
.container{
width: 1200px;
margin: auto;
}
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
width: 200px;
box-sizing: border-box;
background-color:green;
height: 700px;
}
.maincont{
text-align:center;
display:inline-block;
width:1000px;
background-color:black;
color:white;
height:700px;
}
Notice that we added an extra line to .sidecont:
box-sizing: border-box;
This is to make sure the padding of the element does not count against the width of the element. Without this line, your sidecontent block will be 210 pixels wide. (200px + 10px padding)
I hope it solves your problem. Keep in mind though that there are far better ways of constructing these types of grids.
I think you'll need to add a few things if you want to do it this way.
First, you should set set box-sizing globally to border-box as this will make working with flexible widths much easier.
* {
box-sizing: border-box;
}
Next, you'll need set a percentage width on your columns to allow them to flex and then set a min width of 1000px to your main content column.
.sidecont {
width: 23.1%; /* 300px/1300px */
max-width: 300px;
min-width: 300px;
}
.maincont {
width: 76.9%; /* 1000px/1300px */
min-width: 1000px;
}
Then, you need to set a min and max width on the container to keep it from growing too large and shrinking too small. You'll also need to give it a margin: 0 auto to properly center the container and, since you're using inline-block you'll want to add white-space: nowrap to prevent the columns from wrapping.
.container {
min-width: 1200px;
max-width: 1300px;
margin: 0 auto;
white-space: nowrap;
}
The end result will look like the following:
* {
box-sizing: border-box;
}
a:hover{
color:#ccffcc;
font-weight:bold;
font-size:1.15em;
text-decoration:underline;
}
body{
background-color:gray;
}
.container{
overflow:hidden;
border-width:2px;
border-style:solid;
border-color:blue;
border-radius:25px 25px 25px 25px;
min-width:1200px;
max-width:1300px;
margin: 0 auto;
white-space: nowrap;
}
.topcont{
padding:10px 0px 25px 25px;
background-color:white;
}
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
width: 23.1%;
min-width:200px;
max-width:300px;
background-color:green;
margin:0px;
height: 700px;
}
.maincont{
text-align:center;
display:inline-block;
width: 76.9%;
min-width:1000px;
background-color:black;
color:white;
height:700px;
margin:0px;
}
.bottomcont{
background-color:white;
padding: 0px 0px 25px 10px;
}
<div class="container">
<div class="topcont">
<a href="http://www4.uwm.edu/" target="_blank" >Link One</a> |
<a href="http://www.uwgb.edu/" target="_blank" >Link Two</a> |
<a href="http://www.uwosh.edu/" target="_blank" >Link Three</a> |
<a href="http://www.wisc.edu/" target="_blank" >Link Four</a> |
<a href="http://www.uwec.edu/" target="_blank" >Link Five</a>
</div>
<div class="sidecont">
The sidebar
</div>
<div class="maincont">
Main content of the page goes in this container
</div>
<div class="bottomcont">
Contact information
</div>
</div>
Realistically though, flexbox would be a much better way to go.
You can set the width of the container to fit it in correctly.
try this code
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
mirgin:auto;
background-color:green;
height: 700px;
}
Related
I have a <div> containing an <img>, a <h2> and a <p>. The left half of the <div> should be exactly filled with the img and I want the <h2> and <p> in the right half.
The problem is: the floating <img> doesn't shrink the width of the <p> so the padding-left is behind the <img>, causing <p>'s text to be too tight against the <img>.
How can I resolve this? I created a jsfiddle here The screenshot of it below illustrates better what I mean.
The html is
<div class='featured left'>
<img src='http://www.spss-tutorials.com/img/turtle-left.png'>
<h2 class='ol'>Why I love my Turtle!</h2>
<p>My turtle, Harry Turtle, is simply the friendliest and most clever turtle in the world!
<a href='http://www.dumpert.nl/mediabase/2013731/8ff0c33d/harry_turtle.html'>
Read more.</a>
</p>
</div>
and the CSS is
div{
display:table;
margin:1.5em auto 0 auto;
overflow:hidden;
border:1px solid #0a93cd;
border-radius:.5em;
width:50em;
padding:0;
}
div h2{
margin:0;
padding:.1em 0 .1em .5em;
padding:0 0 0.1em .5em;
text-align:center;
border:1px solid #0a93cd;
border-width:0px 0 1px 0 ;
background:#0a93cd;
}
div h2 a{
color:#0a93cd;
color:#fff;
font:normal .8em arial;
font:normal 1em arial;
font:bold .8em arial;
}
div h2 a:hover{
color:#00006d;
}
div.top img{
width:100%;
display:block;
border-bottom:1px solid #0a93cd;
}
div.left img{
width:50%;
float:left;
border-right:2px solid #0a93cd;
}
div.right img{
width:50%;
float:right;
border-bottom:1px solid #0a93cd;
}
div p{padding:.5em 1em .5em 1em;}
Add a margin to your image to push to the side or make you p a floating element as well (although this might make the layout harder to control).
img { margin-right: 10px; }
Your image is not set set to float: left; in your current code, though.
The reason you are seeing this is because an element that is floating does not behave like a standard block element anymore. It's size (and blockiness) only pushes against the contents of other blocks. The actual blocks will just ignore the element (unless that block is floating as well). It's quirky, but it does make sense. Floating elements therefore need to give their own margin to push away more of the content of regular blocks.
img {
float: left;
margin-right: 10px;
}
<img src="" width="100" height="100" alt="So, this is an image." />
<p>Lorem Ipsum Dolor Sit Amet.</p>
Add this style:
div p {
display: table;
}
That seems to create a new line box context, which solves the problem.
Fiddle
I am trying to give magins to inline elements (image thumbnails for a photo gallery). But it seems margin-top is ignored for my elements.
Markup is
<div id="row1-left">
<div id="gallerypreview">
<img id="#previewImg" alt="preview for image" src="gallery/autumn1.jpg">
</div>
<div id="gallerythumbs">
<div id="gallerythumbsInner">
<div class="gallerythumb">
<img src="gallery/autumn1.jpg">
</div>
<div class="gallerythumb">
<img src="gallery/autumn2.jpg">
</div>
<div class="gallerythumb">
<img src="gallery/autumn3.jpg">
</div>
</div>
</div>
</div>
Style is:
#row1-left{
width: 460px;
height: 310px;
float: right;
margin: 15px 15px 0px;
}
#imggallery{
width:450px;
height:300px;
margin:5px;
}
#gallerypreview{
width:450px;
height:200px;
margin:2px 5px;
border-radius:20px;
background-color:#E7E7E7;
}
div#gallerypreview>img{
margin:1px 25px;
width:400px;
height:198px;
}
div#gallerythumbs{
margin:5px 5px;
width:450px;
height:90px;
background-color:#E7E7E7;
border-radius:5px;
}
#gallerythumbs .gallerythumb{
display:inline;
width:140px;
height:86px;
margin:5px 5px;
}
div.gallerythumb>img{
width:138px;
height:76px;
}
According to some old posts on SO, margin-top is not applied to inline non-replaced elements. My questions is if there is any hack to get this done, for example, for my inline image thumbnails that are to be space from their top parent element?
Inline elements and margins is a hot topic because of its unusual activity. Some people use padding to overcome this problem.
.....
Another way is to use display:table; instead of display:inline;
best way is to....
use css styling like this
div{
position:relative;
top:-2px;
}
this brings the div 2 pixels down.
display: inline; Do not respect top and bottom margins ...
I've tried a few different rules but I can get my top menu to center. When I change the position to absolute or relative it does go to the center but then the height goes to 100% for some reason. I don't have a set height because I want the five to be the size of the children.
Here's the HTML:
<div id="topWrapper">
<a href="index.html">
<header id="top_header">
<h1>MacroPlay Games</h1>
</header>
</a>
<nav id="topnav">
<ul>
<li>Home</li>
<li>About</li>
<li>Trailers</li>
</ul>
</nav>
</div>
CSS:
#topWrapper {
border:1px solid #00ffff;
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index:9999;
width: 850px;
margin: 0px auto;
float:clear;
}
Fiddle: http://jsfiddle.net/kjAAy/
Add margin:0 auto with left:0px; right:0px
#topWrapper {
border:1px solid #00ffff;
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index:9999;
width: 850px;
margin: 0 auto; left:0px; right:0px;
float:clear;
}
DEMO
Same method works even for position:absolute
I noticed a small error in the original code and also the code for the most popular response from Sowmya.
More specifically, the property in question is "float: clear;", and to my knowledge there's no such thing as "float: clear;"
Unfortunately, since I just created this account I'm unable to correct the error or reply to that post. Which is why I created a new post.
You can check out W3C for float CSS properties here:
http://www.w3.org/wiki/CSS/Properties/float
Values listed are "left | right | none | inherit"
Thanks for listening!
Position="fixed" is not recommended though.
<div id="someid" align="center">
--whatever code--
</div>
This would do. I recommend you should read the purpose of position tag.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Or you could use:
border:1px solid #00ffff;
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index: 9999;
width: 850px;
float: clear;
left: 50%; /* position halfway from the left of screen */
margin: 0px 0px -425px 0px; /* pull the div into center */ }
Fiddle: http://jsfiddle.net/zXFdN/3/
ps align="center" is not supported in HTML5: http://www.w3schools.com/tags/att_div_align.asp
I need to show a picture and text next to it, but the problem is that the picture is too big and I need to reduce it by setting custom width and height.
CSS:
#list{
max-height:200px;
overflow-y:auto;
padding:5px;
/*display: none;*/
}
.info{
border: 1px dashed #CCCCCC;
margin-bottom: 5px;
padding:0 5px;
overflow: hidden;
cursor: pointer;
}
.info .image{
width:20%;
height:30%;
display:inline-block;
margin-right:20px
}
.info .image img{
width: 100%;
height: 100%;
}
.info .text_data{
display: inline-block;
}
HTML:
<div id="list" class="select_block">
<div class="info">
<div class="image">
<img src="https://dl.dropbox.com/u/14396564/screens/screenshot.jpg">
</div>
<div class="text_data">
<p>
Name: Some name
<br />
Start: 2012-05-17 04:43:40
<br />
End: 2012-05-17 04:43:40
</p>
</div>
</div>
</div>
http://jsfiddle.net/nonamez/e5hyX/
In Firefox it's like
In Safari (probably in chrome is the same)
So I need something like this (hover on the picture shows it in full size, so I only need a list of previews, but with percentage).
If you only set the height or the width, the browser will scale the image in proportion to its natural dimensions. If you need to make sure that it stays inside a given area, make sure you use the max-* properties. For example:
width:50%;
max-width:100px;
max-height:80px;
I have a problem with CSS and HTML I cannot understand why this is happening
HTML:
<body>
<div id="header">
<div id="header_conteiner">
<div id="logo_container">
<img src="images/logo.png" />
</div>
<input type="text" id="txtSearch" class="text_input" />
</div>
</div>
</body>
CSS:
body{
background:#787777;
font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
font-size:0.81em;
margin: 0px;
padding: 0px;
}
#header{
height:100px;
background:#000000;
width:100%;
margin:0px;
border:0px solid #6F3;
}
#header_conteiner{
width:1000px;
height:100px;
border:1px solid #9F0;
margin:0 auto;
}
#logo_container{
padding-top:3px;
width:237px;
height:100px;
border:1px solid #03F;
}
#txtSearch{
width:220px;
height:20px; float:right;
}
Here is result:
as you see in image input text is out of header_conteiner can anyone advice me something?
Move the input before the logo container.
Add this to #header_conteiner:
float: left;
clear: both;
So result is this:
#header_conteiner{
width:1000px;
height:100px;
border:1px solid #9F0;
margin:0 auto;
float: left;
clear: both;
}
logo_container is a div, a block element. Meaning it takes up the horizontal space in its container; the next HTML element will be forced below it. As logo_container is set to 100px, the same as header_conteiner, there is no vertical space left for your input box. It is forced below logo_container.
To fix the problem, you could make logo_container an inline element and float it left. Inline elements can sit next to each other, whilst block-line elements need their own horizontal space.
CSS display property: http://www.w3schools.com/cssref/pr_class_display.asp
it looks like logo_container has a padding on top of 3px