I have this image that I would like use as a border.
There are 3 inline columns and there will be 2 of these images that separate the center column from the right and left columns.
I can use the css border property but it doesn't look right as the border passes the image on the top, bottom and through the center. Can this be done and if so, how can I do it?
The thing to keep in mind is that if the center columns grows, the image will need to grow in height with it. I want to stay away from setting a height on the page.
EDIT:
Is there a way to get these borders to grow in height if either the side columns or center columns grow?
<style>
#col1{
display:inline;
float:left;
width:100px;
border:1px solid
}
#col2{
display:inline;
float:left;
width:300px;
border:1px solid
}
#col3{
display:inline;
float:left;
width:100px;
border:1px solid
}
</style>
<div id="col1">1</div>
<div id="col2">2</div>
<div id="col3">3</div>
Where you see the borders now, they should be replaced with this image but the image should grow with the tallest column, whichever one that may be.
To use an image border:
img {border-left: 1px solid #ccc;}
/* assuming that the image is right and you need a border to the left. */
From the comments, tried this...
HTML
<div class="wrap">
<div class="left"><textarea></textarea></div>
<div class="right">
<img src="http://i.imgur.com/Dhu0f.jpg" alt="grow" />
</div>
</div>
CSS
.wrap {overflow: hidden; height: auto;}
.left, .right {float: left; height: 100%;}
.right img {height: 100%; width: auto;}
Fiddle: http://jsfiddle.net/N2bVR/
Update:
The best option for your question would be, running the border image as a background image to the body and give a repetition on y axis.
Related
I have a header that should stay at least as wide as the below div is or wider. Everything looks fine as the windows is larger than the content but when the window gets smaller so does the top div.
#top{
border:1px solid black;
height:200px;
width:100%;
}
#content{
margin:auto;
width:1000px;
height:600px;
border:1px solid red;
}
<body>
<div id="top"></div>
<div id="content"></div>
</body>
Any suggestions?
http://jsfiddle.net/Z242Y/
I believe your problem is with the fixed width you have on the content where as the top div has a percentage width, so to fix just change the content div to a percentage width that is a little smaller like I did, I set it to 80%
#content{
margin:auto;
width:80%;
height:600px;
border:1px solid red;
}
Here is your updated FIDDLE
Hope that helps.
When you give an element a width of 100% in CSS, you’re basically making this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.
Try setting the width of the #top using javascript.
var x = $('#content').width();
$('#top').width(x);
JS Fiddle
Firstly, you can wrap your html in a container as such:
<div id = "divContainer">
<div id="top"></div>
<div id="content"></div>
</div>
Then, you can give it a fixed width, so that it will decide the width of its contained elements. In this way, both the top and content div will always have the same width.
For that, you will need your CSS to be as such:
#divContainer {
width: 1000px;
}
#top {
border:1px solid black;
height:200px;
width:auto;
}
#content {
margin:auto;
height:600px;
border:1px solid red;
}
You can see it here: http://jsfiddle.net/G4L4V/
Note: In this approach, the two divs will always have the same width.
In case you want to enforce the 1000px width and still have the content width to be smaller than the top div, then you could make a slight adjustment in the #content class as such:
#content {
margin:auto;
width:90%;
height:600px;
border:1px solid red;
}
I have a main div at the center of the screen at the shape of the touch pad.
Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.
See the pic below, yellow window is the whole pad and the red window is the content screen.
Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?
Yellow's css:
#mainWindow{
margin-left:auto;
margin-right:auto;
background-image:url("../images/mainWindow.png");
background-size:100% 100%;
height:100%;
width:80%;
position: relative;
border-style:solid;
border-width:3px;
border-color:yellow;
}
The red one doesn't really have anything.
I hope you understood me. Thanks beforehand.
EDIT:
html code for the screens:
<div id='mainWindow'>
<div id='screen'>
</div>
</div>
In order for a DIV to have 100% height, you need to make its parents 100% height as well:
body, html {height:100%}
Slightly confusing prompt, but see if this works for you:
http://jsfiddle.net/T3MHZ/
HTML snippet:
<html>
<head></head>
<body>
<div id='mainWindow'>
<div id='screen'></div>
</div>
</body>
</html>
CSS styles:
html, body{
width:100%;
height:100%;
margin:0;
}
#mainWindow{
margin:0;
height:100%;
width:100%;
/* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
padding:50px 40px 50px 40px;
/* box sizing will make sure that the usable content size is minus the padding value */
box-sizing:border-box;
position: relative;
border:1px solid black;
}
#screen{
width:100%;
height:100%;
border:1px solid red;
}
By using a combination of measured padding on #mainWindow to account for the tablet border, and box sizing of border-box to assure exact fit of the #screen content, this should give you the flexible layout you're looking for.
Don't forget your viewport meta tag! ;)
I'm not sure if I'm understanding what you want correctly, but try
height: 100%;
on red.
min-height:100%;
You have no content, it's going 100% of it's parent content. Diodeus's answer would work as well for the same reason, if the body, html are 100% window height then the divs inside will look at that as content.
http://jsfiddle.net/calder12/Jq7xR/
<body>
<div class="container">
<div class="outside">
<div class="inside"></div>
</div>
</div>
</body>
.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}
To be honest even my brain is struggling with the 82.5% height to get the margins to work right =/ But I do believe that is what you're after.
I have two divs in my page: leftpart and rightpart which has the following css:
.leftpart{
width:280px;
background:#0054a6;
color:#fff;
padding-top:40px;
height:100%;
min-height:637px;
box-shadow:3px 3px 10px #bebebe;
position:relative;
}
.rightpart{
width:75%;
padding-left:10px;
}
I want this sidebar(leftpart) till the end of my page(till the bottom). I've set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
If you want to try this in CSS you could try the negative margins trick.
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
SIDEBAR
</div>
<div class="col2">
CONTENT
</div>
</div>
Good browsers out of equation, it needs to be valid on IE 8 and sup;
How to center image on a floated div without knowing image width or height ?
The image is semantically relevant so, it cannot be a background;
The html:
<div class="logo-organization-home">
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</div>
And the css:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
I've tried display:table-cell; no success;
I've tried text-align center with a certain padding: no success;
Failed try:
http://cssdesk.com/pQnRG
Thanks
To center horizontaly, use: 'text-align:center' for .logo-organization-home
If the containing element has a width, you can use the following:
.logo-organization-home img {
display:block;
margin:0 auto;
}
Concerning horizontal centering, the example that you linked to here: http://cssdesk.com/pQnRG does not work properly since the width of the div is smaller than the width of the image. If you increase the width to 40% for example, you'll see that the image will be centered correctly, even when the containing div has a padding.
Concerning vertical centering, display:table-cell "requires a !DOCTYPE. IE9" on IE8. http://www.w3schools.com/cssref/pr_class_display.asp Alternatively, although unethical, you can use a table/row/cell directly as an additional container:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
table{
width:100%;
height:100%;
}
td{
vertical-align:center;
text-align:center;
}
And the HTML:
<div class="logo-organization-home">
<table><tr><td>
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</td></tr></table>
</div>
I have a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.
I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.
How should I fix this?
It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top
Another option (or as well as) is to set the line-height to the desired height rather than the height.
If you have no luck with these, I suggest you put your html and css up on jsfiddle.
Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.
CSS Code
#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}
HTML Code
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner" style=" margin:0;"></div>
</div>
Here's a working solution. http://jsfiddle.net/j3zjg/
<style>
#container{
width:500px;
height:300px;
border:1px solid red;
}
#container div{
width:30%;
float:left;
height:40px;
background:red;
margin-right:5px;
}
</style>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>