Im trying to have a blueprint layout wich is 950px so I do something like the image below:
Like regular the 950px container ( right box ) is floating center page
Now I'm in the need of having a #menu div floating left towards this 950px box, it should be positioned left to this #container 950px div and have a fixed width.
How can such a thing be accomplished? I tried already several css tricks to no avail, i know there is liquid layout but then the space between #menu and #container will become to big I want that space to be fixed like in below example say 20px the blueprint default.
anyone knows how to make this happen and have the divs stay on page even when screen resizes?
if i understood your question this will do what you want:
body, html
{
width: 100%;
}
<div style="margin: 0 auto; width: 1100px">
<div style="width: 150px; float:left;">
menu
</div>
<div style="width: 950px; float:left;">
right part
</div>
</div>
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
This question already has answers here:
CSS floats, change order on mobile layout?
(5 answers)
Closed 9 years ago.
I have two divs whereas (div 1) is floated left while (div 2) is floated right. I am creating a responsive layout where when the viewport changes, (div 1) will go under (div 2). I created a simple image via MS Paint for an easier illustration and also some code. Also, both contain dynamic content so their heights must not be fixed.
No javascript (if possible) just plain CSS. I only know how to put div 2 under div 1 but not the other way around.
Does anyone know how I could achieve this?
HTML:
<div id="div1 sidebar" style="float: left;">
//dynamic content
</div>
<div id="div2 content" style="float: right;">
//dynamic content
</div>
HTML is auto generated so in the markup, div1 originally comes first than div2. Not advisable to change the order (place div2 above div1) since many pages use the same layout. See code above
There is my proposition. Using media queries, find the largest width that you want your divto stay side by side.
In your html, place your div like this (the right one before):
<div class="div2">
div 2
</div>
<div class="div1">
div 1
</div>
The css used to display those div should look like this:
.div1 {
float: left;
width: 25%;
}
.div2 {
float: right;
width: 75%;
}
Finally, to display your left div below the right one, your should add in you css something like this:
#media all and (max-width: 480px) {
.div1, .div2 {
float: none;
display: block;
}
}
Here is a jsfiddle that demonstrate this coding. You only have to resize your browser to see your left div going right under your right one.
I would use a media query to change the CSS styles applied to each of those divs when the viewport is sized to where you want the change to occur. Then float div 1 to the right, float div 2 to the left and give div 2 a big enough right margin that it pushes div 1 down to the next row.
I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).
Check out this web page: http://dev.driz.co.uk/attachment.htmldead link
As you will see you get a sidebar fixed and a div that is positioned absolute and allows a user to scroll around a giant image. All works great, expect that if you scroll to the right you will see that the image is touching the edge of the screen and does not have the 40px padding like the rest of the content? Any ideas why?
Thanks
Float this div left
div#attachment div.padding {
float: left;
padding: 40px;
}
This would also work:
<div class="padding" style="position: inherit;">
<img src="http://dummyimage.com/1440x900/00aeff/fff">
</div>
I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)
horizontal centering can be done with CSS:
#containerDiv {
text-align:center;
}
#innerDiv {
margin: 0 auto;
text-align: left;
}
For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.
The only ways to center variable width in all browsers (that I know of) is with
<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>
or JavaScript
As for center horizontal that would force you to use JavaScript (I think)
IE needs a "text-align: center" on the top-level element.
For example, your body element has "text-align: center",
and your container has "margin: 0 auto".
Then IE will center it.
You can set back "text-align" to left on your container if you don't want its content centered.
Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.
<div style='width:400px;height:200px;background-color:#CCCCCC;'>
<div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'> </div>
</div>
EDIT: Found link that might help on the vertical part:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You could use the display attribute to make a table-cell out of it:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
However, this recommendation does not really work for me. But this one does:
https://stackoverflow.com/a/6284195/156481