I am working on a website and am willing to achieve the following layout. I would greatly appreciate if you could guide me to the working solution.
In the header of a page there is:
a logo on the left (<a> tag)
2 widgets (<aside> tags) in a <div>
I need these 2 widgets to take up all the remaining width (all 100% except for the logo width).
How do I do this with CSS? If there is no way to do it without modifying HTML, then what (and how) would you suggest to change? Responsiveness is not a priority #1, however the webpage itself is responsive.
I understand there are many possible solutions, but please do not suggest JavaScript solutions or HTML changes that make use of tables.
Meanwhile I will try to prepare a code snippet to avoid possible misunderstanding ...
Here's how you do it:
Give header overflow:hidden so its height will wrap floated elements (or you could use a clearfix)
Make the header have padding-left the same width as the logo. Make
the logo float:left with a negative margin-left the same width as the
logo. This will fill the padding-left of the header with the
logo.
Make the header have padding-right the same width as the 2nd
<aside>. Make the 2nd <aside> float:right with a negative
margin-right the same width as the 2nd <aside>. This will fill the
padding-right of the header with the 2nd <aside>.
Lastly, give the 1st <aside> float:left and width:100%. Boom - you're done!
jsfiddle demo
Related
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
I found a simple web site design example using DIVs at the following link:
http://www.htmlgoodies.com/img/3_column.html
The problem with this design is that it is a fixed width. I need a design where the wrapper DIV expands to the full screen area (100% width) and the header, main and footer DIVs resize along with it.
If I set the wrapper and footer widths to 100% it does take up the full area on a maximized browser window but shortening the window causes the right and main DIVs to wrap downwards. How can this wrapping be prevented?
I'm not sure if this is the answer you are looking for but surly using float:right or float:left on the div that is wraping under another div should fix the problem?
I recommend looking into using fluid960gs
Cant be done, only one attribute for DIV, which is the align attribute. Maybe consider using tables: http://www.w3schools.com/html/html_tables.asp
Shadowpat
I have multiple divs with text and what not in them. When the page is made smaller horizontally all of the elements shift. However,if you resize this page, elements disappear and nothing moves. How do I fix this problem so it is like this page?
Thanks!
If you view the source of this Stackoverflow page, then you will notice that all of the content on the page is wrapped inside of a container div with the width set to 100%, and the margin and padding both set to 0. If you want to have a fixed width, then do not use percentages, but instead specify your page to be a specific width in pixels.
If you want to center all you content, wrap it in a div like so:
<div class="wrapper">
<!-- Your Content !-->
</div>
And then add the following to your stylesheet:
.wrapper {margin:0 auto;width:960px;} /* Change 960 to desired width */
I hope this helps!
Predefined sizes make the elements do not move when you resize the screen, that will keep their size in different screen resolutions also, that is to take into account. Also you must use margins and padding fixed.
In short ... not more percentages, but don't abuse fixing everything
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/