I want to make a make a header with some menu links. The inner div is not taking the
margin from top. Please suggest me how to write the css for this.
<div style ="width:100%; background-color:Aqua; height:100px;">
<div style="width:876px;background-color:Blue;margin:20px auto;height:60px;">
<h3>menu items</h3>
</div>
</div>
Also when I resize the browser (pressing shift+ctrl+M on mozilla) the outer dive does not wrap the inner div properly.
you are probably getting this because your second width is fixed so no matter the browser size, it is never changing whilst the first width changes since it is in percentage
<div style ="width:100%; background-color:Aqua; height:100px;">
<div style="width:70%;background-color:Blue;margin:20px auto;height:60px;">
<h3>menu items</h3>
</div>
</div>
Set the outer-div to
display:inline-block
is this fiddle what you want?
html
<div class ='outer'>
<div class='inner'>
<h3>menu items</h3>
</div>
</div>
css
.outer{
width:100%;
background-color:Aqua;
height:100px;
padding-top:20px;
min-width:876px;
}
.inner {
width:876px;
background-color:Blue;
margin:0 auto;
height:60px;
}
Related
First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.
First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.
So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}
I want to create html page the next vision. Location of divs 1,2 and 3 in one line was done, but with 4th div I have some troubles and can't make it.
You really should post your code to see whats wrong with it.. But i made the example for you.
Here you go, you could use float.
Html Code:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css Code:
#wrapper{width:300px; margin:0;}
#first { height:300px; width:100px; background:black; float:left;}
#second{ height:250px; width:100px; background:red;float:left;}
#third{ height:250px; width:100px; background:green;float:left;}
#fourth{ height:50px; width:200px; background:blue;float:left;}
Working DEMO
Here's an example that uses non-fixed heights and widths. The key is wrapping the subsections in divs as well and styling accordingly. div is short for division after all.
<div class="left">
1
</div>
<div class="right">
<div class="second-third-wrapper">
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
<div class="fourth">
4
</div>
</div>
http://jsfiddle.net/Pb5NX/2/
The divs then use percentage height and widths to size them properly. These percentages take up a percentage of the parent element (the <body>, which then inherits from the <html>), so the parents height needs to be set as well.
body, html {
width: 100%;
height: 100%;
}
.left {
background-color: blue;
width: 50%;
height: 100%;
float: left;
}
If you want them a fixed size, you can just set a specific height and width style on the specific elements and the percentages will do the rest.
Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.
I have design like this :
<div id='container'>
<div class='box'>
<div class='boxleft'>something left</div>
<div class='boxright'>something right</div>
<div class='clear'/>
</div>
</div>
And I set CSS as :
*{margin:0; padding:0}
.clear{clear:both}
#container{width:100%; height:auto; background:#f1f2f3}
.box{width:95%; margin:0 auto; height:auto; background:white}
.boxleft{float:left;width:49%;margin-right:1%;}
.boxright{float:right;width:50%;}
Problem: Background is white of class .box be load later after class .boxleft finished the loading. I now want it load background follow the height of class .boxleft. So, How can I do this?
Thank for your suggestion.
Your problem is a result of the float left and float right without having an height on both boxes inside the main box. Add this to your .boxleft and .boxright:
display:block
That should work.
I know the title doesn't make sense but I don't know how to put it.
Take a look at this: http://jsfiddle.net/nr33k/embedded/result/
I want to increase the height of the well on the right to match the height of the two wells on the left together, so it looks like I have three small wells in one large rectangle. If I try to increase the height the obvious way by adding height:150px it causes the bottom well on the left to fall down. How do I solve this?
Please try to float:left; your row class and then set the height of the span on the right.
.row {float:left;}
Here's a working sample http://jsfiddle.net/BUgQc/
The issue is that the first two ''wells'' are in a row, while the third is in another row.
Try this:
<div class="row">
<div class="span4">
<div class="well well-small" style="height:50px">
<p>hello</p>
</div>
<div class="well well-small" style="height:100px">
<p>hello again</p>
</div>
</div>
<div class="span8">
<div class="well well-small" style="height:190px;">
<p>hello one more time</p>
</div>
</div>
</div>
Make the left side two DIV's in one single DIV and float it left and make the Right side bigger Well div in a single DIV and float if left.... hope this will help for you....
Check this example. Hope it helps
HTML
<div id="container2">
<div id="container1">
<div id="col1" style="height:250px">
<!-- Column one start -->
<h2>Equal height columns</h2>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h3>Mac</h3>
<!-- Column two end -->
</div>
</div>
</div>
CSS
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
DEMO
Source link