second try as I was unluck to explain the issue yesterday. I am trying to achieve the following layout in html/CSS:
The grey box is the 1040px wide centered site container. Above is a header with a much wider picture which shall grow to the right side in case of a larger screen resolution. How could I do this with CSS?
I know that I could calculate the left margin of the site container with javscript and dynamically set the left margin of the header, but I want a css solution.
Regards,
Martin
It's me again, I now finally understand what you mean.
The closest I've been able to get to what you want, is trying things out with percentages.
<div id = "header">
</div>
<div id = "sitecontainer">
</div>
CSS:
#header{
height: 200px;
width: 100%px;
background-color: black;
margin-left: 25%;
}
Try fiddeling around with those percentages until you hit a sweetspot that works for you.
To add; making 2 divs might even be better, something like this: http://puu.sh/3thxc/085a639816.png. But I can't seem to be able to place the second div (headerright) right next to header div.
I came up with a solution which is working but not the sweetest, so if you have a better approach, let me know:
body {
overflow-x: hidden;
}
#growing-header {
position: absolute;
left: 0;
width: 2400px;
background-color: #edf034;
}
#main {
position: relative;
background-color: #00aaff;
}
and the containers:
<body>
<div id="main">
<div id="growing-header">my header...</div>
<!-- some more divs, site-content,...</div>
</div>
</body>
Cheers,
Martin
Related
This is my first post, so please be gentle. I've searched thoroughly for an answer but had no luck - I'm sure it must be something simple but I'm running out of ideas...anyway:
I'm making a responsive site but there's an image that I want to keep at a fixed size. It took me ages to work out how to do this (by removing "max-width: 100%"), however this has had the bizarre effect of changing its alignment so it is no longer centred on the page.
How can I have both? Centred and a fixed size?
Any help much appreciated.
Oh and this is what my image css is looking like at the moment:
img {
height: auto;
min-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
Thanks for all your help so far - although this is still far from resolved I'm afraid. Figured I'd show my code in full as some of you have suggested, so I put it into jsfiddle. However it works absolutely fine there - the window can be resized with the image still retaining it's full dimensions and still remaining in the centre of the page. Yet with exactly the same code, when I load the 'index' page from my PC into Chrome, the image at the bottom either retains its size but drifts to the right when the window is shrunk, or it stays in the centre but shrinks to a ridiculous size. Any idea why there might be such a discrepancy?
Here's my jsfiddle anyway, which might have some clues:
http://jsfiddle.net/eggwhite/0yz6ndjh/
Thanks again.
If I understand you right, you want to add an image which should still be centered even if the parent element's width is smaller than the image. This could be done by using an image wrapper div which is pretty wide and position it accordingly. Also, the image itself should be centered in that wrapper.
In the following example, the layout has two columns, each with an image of 300x300px. If you resize the viewport (use the "Full page" view mode), the images will still be centered (see how the "x" in the placeholder images stays visible).
html, body, .column {
padding: 0;
margin: 0;
}
.column {
display: block;
float: left;
width: 50vw;
height: 100vh;
background-color: #ccf;
overflow: hidden;
}
.column + .column {
background-color: #ffc;
float: right;
}
.img-wrapper {
width: 10000px;
margin-left: calc(-5000px + 50%);
text-align: center;
}
.img-wrapper img {
margin: 0 auto;
}
<div class="column">
Column 1
<div class="img-wrapper">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="column">
Column 2
<div class="img-wrapper">
<img src="http://placehold.it/300x300" />
</div>
</div>
Can be done by wrapping the image in a <div> like so:
HTML:
<div>
<img src="..." alt="random blue sky image" />
</div>
CSS:
div {
width: 100%;
text-align: center;
}
img {
width: 250px; /* or whatever width you need the image to be */
}
Here's a demo of the code.
If that didn't help, we'll ask that you present us with the problematic code. Jsfiddle.net is an easy way to do that.
I'm new to CSS and have a somewhat general question, but with a specific purpose.
Here is the webpage in question: http://www.lymemd.org/indexmm6.php
I have several DIVs: #BannerArea, #BannerinLeft, and #BannerinRight, all which format everything in the green square. I'm looking to split everything up and so something like this:
If anyone could help point me in the right direction in terms of what tags I'll need to do and what I'll need to get rid of, I would be very grateful. I have tried many times to get everything right, but I always end up making something worse.
Thanks very much.
The simplest way would be to make two columns, the left one including the Twitter and What's New div, and the right one including the Support Us and Diane Rehm divs. These two columns will have to float, so make sure they are in a container of the correct width. The top div is easy.
Here's a jsfiddle: http://jsfiddle.net/83ngD/7/
The basic HTML:
<div id="wrapper">
<div id="topgreen"></div>
<div id="leftcolumn">
<div id="twitter"></div>
<div id="whatsnew"></div>
</div>
<div id="rightcolumn">
<div id="supportus"></div>
<div id="dianerehm"></div>
</div>
</div>
The basic CSS:
#wrapper {
width: 960px; /*/ example width /*/
margin: 0 auto; /*/ centers the div /*/
}
#topgreen {
width: 100%;
height: 50px; /*/ example height /*/
}
#leftcolumn {
width: 50%;
float: left;
}
#rightcolumn {
width: 50%;
float: left;
}
Now just fill the other divs with the content you want. The code above will give you the layout from your picture, but very basic.
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
What I'm trying to do is have three divs wrapped in a fixed width container that will auto resize when the content in the middle div expands. As the middle gets larger the two beside it get smaller if that makes sense.
<div id="container">
<div class="one"/>
<div class="middle">...</div>
<div class="two"/>
</div>
Not sure if I should be using div or span for this.
Any advice on the CSS?
#thirtydot The two divs at the side of
the middle div will contain nothing,
just a border-top, the middle div will
contain two links. :)
In that case, I'm answering with something simpler that you might be able to use.
See: http://jsfiddle.net/uZ5dn/
<div class="container">
<span class="middle">content con tent the tent of cons content content</span>
</div>
.container {
border-top: 5px solid #f0f;
text-align: center;
}
.middle {
background: #fff;
display: inline-block;
position: relative;
top: -5px; /* same as border-top-width */
}
It's not awesome, but it might be good enough.
At the very least, I'll get a better idea of what to suggest next.
If I'm reading your question correctly, I suspect that you'll have to do this with JavaScript, and DIVS.
You can get and set the actual size of the DIVs in pixels using the .height() function.
So, you could do something like:
if ($('#div2').height() > 200) {
$('#div1').height(100);
$('#div3').height(100);
} else {
$('#div1').height(200);
$('#div3').height(200);
}
My problem is best outlined with this schematic/image which outlines how I want it to look:
!
I have a background image and 2 divs for text over the top of it (headline, and intro-text). I also have 2 divs on either side of the headline - these are for the white horizontal stripes.
My issue is that the headline is changeable in a CMS, and I want the horizontal white stripes to automatically fill up the space to the left and to the right of it, regardless of the headline's width.
I can't figure out how to make those 2 horizontal white stripes resize automatically.
Here's my HTML:
<div id="masthead">
<div id="headline-container">
<div id="left-stripe"> </div><div id="headline">{headline}</div><div id="right-stripe"> </div>
</div>
<div class="clear-both"> </div>
<div id="intro-text">{intro_text}</div>
</div>
And here's my CSS - ignore the widths specified for the left-stripe and right-stripe - they're just placeholders:
#masthead {
height: 260px;
}
div#headline-container {
width:960px;
padding:none;
}
div#left-stripe{
float: left;
background-color:#fff;
height: 3px;
width:500px;
display: inline;
}
div#right-stripe{
float: right;
background-color:#fff;
height: 3px;
width:100px;
display: inline;
}
div#headline {
text-align:right;
color: #fff;
font-size: 200%;
float: left;
display: inline;
}
div#intro-text {
text-align: left;
float: right;
width: 300px;
color: #fff;
}
Ideas? Please let me know if I can provide more detail.
I'm a bit too busy to actually test this, but this might give you some direction. i'm not sure the exact effect you're trying to achieve (see comment about finding a live demo someone made).
Regardless, this kind of fluid layout is a bit difficult to achieve reliably with straight CSS. To make it easier I would suggest making the right-stripe a static width.
This CSS solution MIGHT work... no promises.
markup
<div class="container">
<div class="headline-container">
<div class="left-stripe"></div>
<div class="headline">Headline goes here</div>
<div class="right-stripe></div>
</div>
<div class="content"></div>
</div>
CSS
//static width for right stripe
.right-stripe { width: 20px; }
.headline { width: auto; }
.left-stripe { width: auto; }
Using javascript would make it really easy though... here's how i would do it with jQuery. Again, I would make the right-stripe a static width to achieve this effect.
(same markup...)
..
js
var totalWidth = $("#container").width();
var leftWidth = totalWidth - ($("headline").width() + $("right-stripe").width());
$("left-stripe").width(leftWidth);
You can do this dynamically, with jQuery, for example. You take the full width of the 3 div's, drop the size of the inner div and assign dynamically the widths of the 2 outer div's in which the bar should repeat horizontally.
Basically, you will need:
$("#whole-div").width() - $("#inner-div").width() for the outer div's total width. Then, depending on your positioning of the inner-div, you assign values for the outer div's.
For example: whole div has 1000px, inner div has 200px and inner div is positioned 600px left. You will then assign 600px to the left div ($("#whole-div").width() - $("#inner-div").css('left')) and 200px for the right div ($("#whole-div").width() - $("#inner-div").css('left') - $("#inner-div").width()). Of course, you will then set a background-repeat property on the outer div so that the image repeats.
Hope that helps!
UPDATE CSS only fluid solution: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/1/
it uses the same background image twice, on #masthead and on #headline-container. except ton headline container the background is offset to match its left position relative to its parent element. then we only need one div.line behind it, which gets covered by the background image under the headline and copy, giving the illusion of a seamless image.
do you mean like this?: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/