I want to move div's on window resize.
I have three div's inside one div (i.e container)
Eg:
<div id="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
It's aligned properly. But I want these div's to move (but it shouldn't get overlap, I mean it should stop before it gets overlap) when I do windows resize.
This is how my CSS looks.
#container {
text-align:center;
width : 100%;
}
.left {
float:left;
}
.center {
display: inline-block;
margin:0 auto;
}
.right {
float:right;
}
Thanks for the help!
Blockquote
you can simply create your div's and css design you like on this twitter bootstrap, this service can create responsive layout automaticly.
twitter bootstrap
Your CSS is not right. Instead of use #left, #center, #right, you need to use .left, .center, .right
When you use # it will select a html element with that id, this is why your css is just selecting <div id="container">, in your other divs you are using classes, so you use .
See a example :
http://jsfiddle.net/rELXZ/
More info about CSS Selectors you may find here http://www.w3schools.com/cssref/css_selectors.asp
Related
I was wondering if someone could explain to me why this is happening. Sorry I am new to CSS/HTML. I am working on creating and HTML layout for a basic page, currently I have three Divs. I want one container on the left (id= leftside) with 50% width and another on the right (id=rightside) with 50% width and the third container (id=narrow) below both of them at 100% width.
So currently my third div gets hidden underneath the first two unless I add the property 'top: 50%;' to that div. Can someone please explain why this is happening? I thought that since the space is already taken by my other two divs that I would not have to use the 'top' property in order for the third div to display. Why is it being hidden by the other divs?
Here is my HTML code:
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
Here is my CSS code:
#leftside{
width: 50%;
height: 50%;
background-color: blue;
float:left;
}
#rightside{
width: 50%;
height: 50%;
background-color: red;
float:right;
}
#narrow{
width:100%;
height:20%;
background-color:black;
}
Whenever you do use the float for the element then don't forget to clear them.
For easier I always use overflow:hidden; to the parent div:
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
So now, you know the key reason of hiding?
Because the first two divs have set floats so they are taken out from the "normal" flow, while the last remains the same and isn't affected by the previous two.
To be affected you can either set float also to the last element, or clear the float.
#narrow {
width:100%;
height:20%;
background-color:black;
clear: both;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats for more info.
I always create a spacer div and use it whenever I need to clear any previous floats or coding. This is specially useful when I have a ton of divs within a parent div.
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*
I am trying to move from old html styled with tables, to html5 styled with CSS, but I have problems:
codepen Demo
You can see that, text is aligned to the edge of the page, and I want it aligned to the edge of the header banner.
I cant figure out, how to do that? without using tables.
Also, please note, that the .article:nth-child(odd) CSS selector, somehow aligns the odd elements to the left, and not to the right... I dont understand why.
Thanks!
The best way to create a fixed width website is to add a containing div:
Simply add a fixed width div around all your current code.
#Wrap{width:1024px;}
.
<body>
<div id="Wrap">
...
/* rest of website */
...
</div>
</body>
codepen Demo
CLEAN EXAMPLE
HTML
<div id="Wrap">
<div id="Head"></div>
<div id="Body"></div>
<div id="Foot"></div>
</div>
CSS
#Wrap{
width:1024px; /*Your desired page width*/
margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
width:100%; /*Fill the width of the wrapper*/
}
#Body{
width:100%; /*Fill the width of the wrapper*/
}
#Foot{
width:100%; /*Fill the width of the wrapper*/
}
For example
codepen Demo
.article {
width: 1024px;
}
To center the .articles you need to set a width. Also you might want to consider getting rid of
<div align="center">
It's deprecated in html5
Your content have the same width as a header, but you have image inside header which have a little less width than 100% of site, so what u need to do is add some width for article something like this:
.article {
display: block;
margin: auto;
width: 900px;
}
codepen Demo
you need to write css to style the page correctly:
codepen Demo
div {
text-align: center;
}
I am in need of some help with some divs.
I currently have
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
and I am trying to make it so the following occurs.
Left div aligns against left side of the screen, while right aligns to the right. The main then would be 1000px wide and be in the middle of the page
| Left Div | Main div 1000px wide | Right div |
I have seen this done using tables but I'd rather use a div to create my layout.
the main div will have other divs inside it for contents so I will also need the left and right divs height being the same as the main div.
Anyone able to help?
Regards,
Mason
You can do table-like layouts using divs. Check out the table-* values for CSS display.
http://jsfiddle.net/MVSjr/
HTML
<div class="table">
<div>
<div id="left">test</div>
<div id="center">test</div>
<div id="right">test</div>
</div>
</div>
CSS
#left {
background:#F00
}
#center {
background:#0F0;
width: 300px;
}
#right {
background:#00F
}
.table {
display:table;
width:100%;
}
.table > * {
display:table-row;
}
.table > * > * {
height: 200px;
display:table-cell
}
If you want a constant distance between the left / right divs to the main one, you'll have to specify it. My advise is to specify a page width, say 1300 px, and then split div's measures as you need (e.g: 150px for the left div, 1000px for the middle, 150px for the right. And then center the wrapper div to the page.
.wrapper{
width: 1300px;
margin: auto;
}
.left{
width:150px;
}
.main{
width:1000px;
}
.right{
width:150px;
}
You might also want to consider making it responsive either by specifying width in % if your content allows it or by specifying break-points in media-queries, but it's just a thought...
You are looking for three column layout for your web page. Three column layout can be either fixed or fluid.
In Fixed layout all the three columns would have the fixed width and when you re-size your browser screen, they will display with horizontal scroll bar.
In Fluid layout all the three columns would have width in percentage of screen width. Here is an example of three column fluid layout.
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
and CSS
div{
display:inline-block;
height:500px;
}
.left,.right{
background:red;
width:15%;
}
.main{
background:green;
width:70%;
}
Js Fiddle Demo
I am working with someone else's styling, and can't get things as they managed to. I am trying to make things look like this page:
http://www.comehike.com/outdoors/parks/add_trailhead.php
See how the image is nicely on the right, and the form elements are on the left.
I have this page that I am messing with and trying to make similar:
http://www.comehike.com/account/member_home.php
Is there an easy way for me to make the image go to the far left, and the stuff asking the person to log in, to be on the right?
Thanks!
Start with changing the width on the first div within .basic. Change the width to 100% instead of 450px
You should be able to continue from there.
I would also move the image into it's own container and float that right, and put the form actions in another container. Also, make use of classes and ids for styling to clean things up.
Here is how you can make food use of floating elements:
HTML:
<div class="container">
<div class="form">
<form>....</form>
</div>
<div class="leftImage">
<img src="img.jpg" />
</div>
<div class="clear"></div>
</div>
CSS:
.container {
width: 800px;
}
.container .form {
width: 500px;
float:left;
}
.container .leftImage {
width: 250px;
float:left;
}
.clear {
clear:both;
}
Replace the div with width: 450px to width: 100% then the child H3 float: left
increase the width to 845px for the div.
Float image to the left.
for the h3 tag do the styling
h3 {
float: right;
display: inline;
}
This will do the task for you.
Remove the empty tags from the HTML.
I'm wondering what the best way to go about doing this is...
I have 3 divs:
a div#container with width=100%; that holds 2 inner divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)
#container {
width:100%
}
#inner_left {
display:inline-block:
max-width:200px;
}
#inner_right {
display:inline-block;
width:100%;
}
The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...
Any help for a CSS noob is much appreciated!
I haven't really seen a good solution in the answers here. So I'll share mine.
Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.
Example:
<div id="left">
Left
</div>
<div id="right">
right
</div>
CSS:
#left {
display: table-cell;
min-width: 160px;
}
#right {
display: table-cell;
width: 100%;
vertical-align: top;
}
Have a look at "liquid layouts" it can describe what you're talking about.
You're probably looking for this one.
In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)
The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.
Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.
I'll also include it below:
HTML
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
CSS
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.
.container {
display: flex;
}
.left {
width: 100px; /* or leave it undefined */
}
.right {
flex-grow: 1;
}
/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">
<div class="left">100px</div>
<div class="right">Rest</div>
</div>
So even though I wanted to do this with CSS only, I ended up just using tables...
Use floating:
#container{
width:100%
}
#inner_left{
float:left;
max-width:200px;
}
#inner_right{
float:left;
width:100%;
}
Edit: have a read a this, it's a nice little guide : quirksmode
you need to provide position:absolute style property to both your div's
This is based on #w00 's answer. +1 friend.
My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.
.sidebyside-left-fixed, .sidebyside-right-fixed
{
display: table-cell;
width: 100%;
}
.sidebyside-left-fluid , .sidebyside-right-fluid
{
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).
Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/
Here's the HTML part:
<div class="wrapper">
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
</div>
And the corresponding SCSS:
.wrapper {
position: relative;
}
$left_width: 200px;
.left {
position: absolute;
left: 0px;
width: $left_width;
}
.right {
margin-left: $left_width;
}
If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).
Credit: This is based on http://htmldog.com/examples/pagelayout2/.
There are several other useful ones there.