divs being removed parent div when float style applied
hi all,
i hope able me below issue.
i apologise if questions have been asking lately basic, i’m teaching myself web design.
i appreciate guys offer, big thank in advance.
i confused why not getting desired effect below code. creating website , have structured website in following way:
<body>
<div id="wrap">
<div id="title"></div><!-- end #title -->
<div id="shopping_cart"></div><!-- end #shopping_cart -->
<div id="content_wrap">
<h2 class="header">header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div><!-- end #nav_bar -->
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div><!-- end #side_bar -->
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div><!-- end #content -->
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div><!-- end #footer -->
</div><!-- end #content_wrap -->
</div><!-- end #wrap -->
</body>
now don't know if structuring website right way way makes sense me. might not source code that’s issue , may css have pasted in below.
now problems having follows:
i want have whole site wrapped in 1 big div #wrap can centre whole site. within div want other divs (which have divs inside well).
to start #title seems fit inside #wrap without problem #shopping_cart gets push outside of #wrap though inside opening , closing #wrap tag.
my next div #content_wrap, seems inside #wrap margin-top have applied #content_wrap pushes down #title not #shopping_cart though #content_wrap below #shopping_cart not #title.
the second problems seem divs or supposed inside #content_wrap.
h2 .header seems fit inside #content_wrap without problems. gets confusing, me anyway. div put below h2 .header inside #content_wrap doesn’t seem go inside #content_wrap or #wrap pushed below #wrap though in source code inside opening , closing div tags.
also #side_bar , #content equal 860px width of surrounding div #content_wrap should fit side side. know ties previous discussion raised in discussion (http://forums.adobe.com/message/4501038#4501038). have taken murry’s advice on board discussion and tried floating #side bar left , left enough margin #content clear, tried floating both left. nothing worked.
as have been writing i’ve gone through code, above issues occur if float div. if float div reason removes div div surrounding , pushes below every single div. don’t know how position divs in exact place want without floating them if float moved out of parent div , therefore aren’t in position want them in either.
if able me resolve issue me future projects. appreciate can give.
kind regards
elliot
css
i have marked out float particular div */style*/ know cancel style. therefore problems having divs #shopping_cart, #side_bar , #content.
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
height:auto;
width:895px;
margin:0 auto;}
#title {
background-image:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
/*float:right;*/}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
height: auto;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
/*float:left;*/}
#content {
height:auto;
width:575px;
margin-top:20px;
/*float:left;*/}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0f0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #fff;
font-size:44px;
font-family:"trebuchet ms", arial, helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #fff;
font-family:"trebuchet ms", arial, helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"trebuchet ms", arial, helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"trebuchet ms", arial, helvetica, sans-serif;
font-size:20px;
padding-right:15px;}
everything fine code , css, few minor added adjustments needed:
add overflow: hidden; 'wrap' css , rid of height: auto; (i've never used height: auto; ever). infact can't think of use should used.
#wrap {
/* height:auto;*/
width:895px;
margin:0 auto;
background-color:#9f3;
overflow: hidden;
}
add overflow: hidden; , importantly clear: both; 'content-wrap' , again bin height: auto; (clear: both; has effect of clearing 'shopping_cart' <div> floated right or when uncomment attribute css.
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
/* height: auto;*/
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;
background-color:#0ff;
overflow: hidden;
clear: both;
}
then uncomment have commented out i.e., - float properties 'shopping_cart', 'side_bar' , 'content'
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment